-
vue-cli工程化工具
【一】vue-cli创建工程的两种方法
全局安装vue-cli工具的命令:npm install -g @vue/cli,-g表示全局安装。
创建vue工程:首先需要进入到创建工程的目录
创建vue工程命令:vue create 项目名(小写字母、可以有横线和下划线)
回车后,会出现vue-cli的一些选项,如果使用default就会创建默认的工程,第二个则是手动选择创建工程,手动选择会出现很多选项,首先会安装一些配套的组件,比如路由组件,选择可以按空格就选择了,这里选择一些常用的组件,绿色就代表选中了。
这里的ESLint代表平时写代码的一些规范
这里选择保存时对我们的代码进行一个检查。第二个表示更新时或者提交时做一个代码的检查。
如果安装的比较慢的话,可以使用ctrl+c来取消安装,然后进入要创建项目的目录中,使用c npm安装项目所需要的依赖。
运行项目的命令:npm run serve
第二种创建vue工程的命令:vue ui,然后粘贴地址到浏览器中,通过图形化界面方式创建vue工程化项目。
如果创建了项目,在Projects中就会显示这个项目。
【二】vue-cli创建的工程目录
查看安装了那些插件
查看vue项目依赖
vue项目的运行
src文件夹:放置源文件。
public:放置的公共文件。
node_modules library root:前端依赖。
项目的入口:public文件夹下——>index.html(有个id为app的div),所有的js的vue实例都绑定到app的div上,而且这里加载了两个东西,一个是router,一个是store,store就相当于vuex状态管理,store是帮助管理组件之间的状态。这里的$mount('#app')可以理解为之前学习的Vue的el,这里就是将这个js绑定到index.html上。
views:相当于页面的视图(Home.vue首页,About.vue关系页),而且Home.vue中引入了components/HelloWorld.vue这样一个组件。
运行项目方式:有个叫做package.json,它相当于对整个文件进行解释说明的一个文件,比如:项目的名称,项目的版本号,打包使用到的一些依赖,开发所使用到的依赖,以及它们所使用到的版本,这里需特别注意"scripts"这里面是开发中长使用的命令。
npm run server
npm run build
npm run lint
这里只需要了解三个目录(public、src、package.json)、其他相当于配置文件,简单了解即可。
查看全部 -
条件渲染、列表渲染、Class与Style绑定
【一】条件渲染:根据条件进行渲染,比如中秋节页面呈现中秋节样式,过了中秋节就没有这种样式了。
条件渲染常用指令:
v-if(还有v-else v-else-if v-show等):标签里属性前写,后面的值是Javascript表达式用来做一些判断,如果满足,则该标签起作用。
后续会讲解v-if和v-show的使用场景及区别。
v-show:它的功能和v-if相似,如果v-show不成立,相当于给标签添加上了display:none。
【二】列表渲染:类似于Java中for循环。比如:一个星空页面会有很多很多<html>标签,如果手写很麻烦,这里就可以通过列表渲染实现这样情景。
列表渲染常用指令:
v-for:可以遍历vue实例中数组的每一项。
可以渲染对象数组
v-for与v-if结合使用:
v-for高阶应用:
【三】Class与Style绑定
Style的绑定:举例使用v-bind:绑定标签的style样式,它与原来不适用v-bind是有区别的,原来是,使用v-bind后,v-bind:,也可以不使用行内式(可以写在vue实例的data里)。还可以添加一些其它的样式,但是如果Key中有-,就需要要两边添加'',其中key也可以是驼峰式命名方法,这样就不用给key添加''了。
Class的绑定:给class绑定值,拥有多种写法。
也可以使用判断
查看全部 -
计算器与侦听器(比较常见和常用)
计算属性关键词:computed
侦听器关键词:watch
watch的使用:首先在Vue实例中声明,比如侦听的是msg变量,后边写个function,这个msg可以传入两个变量进来,一个是新值,一个是旧值,可以通过console.log('newval is:'+newval)在调试窗口中打印输出,当msg值发生变化时这个function就会被执行。
打开前端调试窗口
常见的调试前端Vue的方式(在调试窗口中可以对代码进行改变,但愿有页面代码不会改变),通过给Vue一个变量,然后就可以在调试窗口中使用该变量,这个给app变量的msg做一个变化,看侦听的函数会不会起作用。
computed的使用:计算的值必须都在Vue实例的data中声明的,也就是return返回的值,例如声明一个<p>标签,标签内容声明为{{msg1}},Vue实例中,computed的key为msg1(这个msg1可以没有在data里声明),然后定义function函数,return 'computed:'+this.msg,如果msg改变则msg1也跟着改变。
watch和computed里的function的区别:watch的function只能监听watch的key指定值(msg)的变化,但是computed不一样,只要在return中里一个值发生变化该函数都会执行。
如下图,改变了another的值该函数也执行了,在窗口调试中,可以通过shift+回车,来实现多个语句的一起执行。
监听的值一定都是Vue实例中data的值,如果实例data值之外的值则不会监听,也就是如果改变这个值,页面不会被渲染。
但是在这种情况下如果改变在Vue实例中data之中的值,那么那个不再data之中的值也会跟着被改变。
watch(异步场景)和computed(数据联动)的使用场景:watch通常来说监听的一个变量,这个变量可能是一个单一的变量也可能是一个数组,而computed可以监听很多个变量,但是这个变量一定是在vue实例中的。
查看全部 -
模板语法
【1】Vue文件结构(template,script,style)
template:相当于模板,类似于html中的标签。
script:js的脚本代码。
style:样式代码。
【2】模板语法包含插值、指令(指令缩写)
插值:可以在标签内的{{}}中进行插值,并且该{{}}支持表达式运算。
如果插入的值为标签,可以通过如下方式显示标签。
v-bind:为页面标签属性绑定数据,可以通过在标签属性前添加v-bind:(v-bind可以用:代替),然后给改属性起个名称,在Vue实体中给该名称一个数据值即可。
谷歌调试
通过选择Elements,就可以看到标签的页面的具体信息,这里div的id为app-bind
Vue中函数的执行方式,例如点击事件是通过v-on:click="函数名"(这里还有一种便捷方式写法,也就是把v-on用@代替),然后需要在Vue实体中声明key为methods,如下图。
查看全部 -
推荐使用vue的方式:cdn的方式,https://www.bootcdn.cn/。
引入vue方式:如果是在内网上使用,就把vue下载下来,之后引入到<head>中。推荐使用BootCDN这种方式,然后搜索vue库,这里选择压缩版本min(min如果只是使用这个库,而不是去调试)最好不要使用beta版本,可能会出现一些问题。
使用vue:在body中的<script>标签如下,使用class方式绑定标签<div>,该情况下会优先绑定页面上第一个class为指定的元素,第二个不会绑定。可以使用id选择器方式解决。
如果想使两个class名相同的标签有相同的内容,可以通过设置一个容器给它们包起来,这样容器中的标签的内容就都会是绑定的内容。如下
查看全部 -
vue框架知识体系
【1】基本概念(条件渲染、列表渲染、事件绑定、声明周期、模块化思想)
【2】组件的使用思想及使用方式(路由组件Vue-router、前后端分离会使用到http请求,而http客户端请求最常用的就是Vue-resource插件(官方不推荐使用,但是它仍然很好用,官方推荐使用的是Axios。
【3】常用API
查看全部 -
环境和工具介绍
开发工具:WebStorm或者VScode,推荐使用WebStorm,因为它可以集成更多的开发工具在里面(比如Git终端,而且有图形化界面,操作方便),VScode也提供了一些智能化的插件,免费的、微软开发的编辑器,有语法高亮、语法提示,以及版本控制都可以集成在该编辑器里。
开发环境:Node.js。
nvm介绍:node的版本管理工具(前端依赖库之间的兼容性问题)。
——nvm命令——
nvm --version查看nvm版本
nvm --help查看帮助
nvm ls查看本地安装node版本
nvm ls-remote查看nvm服务器上有哪些版本
nvm install v11.0.0安装某版本的node
nvm use v8.12.0切换nvm版本
注意:下载npm包时,可以通过设置镜像为淘宝的镜像,可以下载快一些。命令为:npm install -g cnpm --registry=https://registry.npm.taobao.org。这样以后下载前段依赖时就会很快。
调试环境:推荐使用谷歌.
vue的Chrome插件:下载网址https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd(谷歌可以很方便查看vue组件的状态)
工程环境:vueCli工具,下载命令npm i -g vue-cli,查看vue版本vue --version
查看全部 -
课程安排
Vue2.x框架常用知识点——20%
Vue2.x核心技术——30%
集成Vue2.x——30%
——第二章——Vue2.x框架常用知识点
【1】认识vue:Hello Vue应用
【2】模块语法,v-bind属性绑定,事件绑定
【3】条件渲染、列表渲染、Class与Style绑定(渲染比较重要)
——第三章——Vue2.x核心技术
【1】认识vue-cli工具,Vue代码规范
【2】Vue组件的调试方法(比较重要)
【3】vue-router路由,vues状态管理(比较重要)
——第四章——集成Vue2.x
【1】介绍开发工作流workflow(单页面、多页面)
【2】单页面Demo(动态表单、列表动态展示)
【3】使用Cli工具,开发常见的应用组件(比较重要)
查看全部 -
vue:很流行的前端框架,特点:易用性、灵活性、高效性。
——课程知识点
【1】Vue2.x框架常用知识点(模板语法、条件渲染、列表渲染等)
【2】Vue2.x核心技术(vue-router、vuex)
【3】集成Vue2.x
查看全部 -
查看全部
-
//test demo 1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> </head> <body> <div id="ele_1"> <p>{{ msg }}</p> <p>{{ msg1 }}</p> <button @click="changeMsg()">点击更改参数</button> </div> <script> var ele_1 = new Vue({ el: '#ele_1', data: { msg : 0, msgAdd: 0 }, methods: { changeMsg: function(){ this.msg += 1; } }, watch: { msg: function(oldM,newM){ console.log(oldM); console.log(newM); } }, computed: { msg1: function(){ console.log('进入computed了!'); return this.msg + ' '+ this.msgAdd; } } }) </script> </body> </html>
查看全部 -
watch 属性中对当前实例中的data值监听可传入两个参数:
改变之前的值
改变之后的值
watch 和 computed 的区别:
watch 是对实例中data的某个参数值得变化进行监听
computed 是在计算内容中的包含的值发生变化时才会触发,触发后会对当前值重新计算并返回参数。(即: 计算的值会进行缓存,只有在计算的参数值发生变化时才重新计算并返回)
查看全部 -
1查看全部
-
1,安装环境nvm
2,chrome vuejs tooldev
3,cdn
查看全部 -
常用指令: 列表渲染
查看全部
举报