用到的前台编程工具是Visual Studio Code，暂时是官网下载vue.js到本地使用
一、Visual Studio Code需要安装的插件：
jshint ：js代码规范检查
Beautify ：一键美化代码插件
Vetur: .vue 文件识别插件
Javascript(Es6) code snippets :Es6语法提示
Auto Rename Tag :自动命名标签，标签成对出现
Auto Close Tag: 自动闭合标签
vue helper :一些vue代码的快捷代码插件
vscode-icons:提供不同文件夹的显示区别
按下ctrl+k 在按下ctrl+s 可以查看快捷键
初次体验
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="vue.js"></script> <title>01vue体验</title> </head> <body> <div id="app"> <P>{{username}}</P> <p>{{greet()}}</p> <button @click="username='李四'">改名字</button> </div> <script> new Vue({ el:"#app", data:{ username:"张三" }, methods:{ greet(){ return "你好" } } }) </script> </body> </html>
二、Vue模板语法
1.v-once加上之后不会改变原来的值
2.v-html读取变量的时候会当做HTML元素来解析
3.v-bind属性绑定，要读取vue.data中的属性，就要使用这个v-bind，也可以省略使用如：<img v-bind:src="logo" alt="">或者<img :src="logo" alt="">
小插曲：设置自己的代码快捷方式：
a.ctrl+shift+p 搜索snippets 点击第一个之后找到html.json打开
b.按照说明操作就可以了----zyb
4.绑定Class
a.通过数组的方式绑定：
<div id='app'> <p v-bind:class="[pcl1,pcl2]">张三</p> </div> <script> new Vue({ el:'#app', data:{ pcl1:"title", pcl2:"main-title", } }) </script>
b.通过对象的当时绑定：
<div id='app'> <p :class="{title:strong1,'main-title':strong2}">哈哈哈</p> <button @click="strong=true">文字加粗</button> </div> <script> new Vue({ el:'#app', data:{ strong1:false, strong2:false } }) </script>
5.绑定Style：
a.用对象的方式绑定：
<div id='app'> <p :style="{backgroundColor:backgroundColor}">我爱你，中国</p> </div> <script> new Vue({ el:'#app', data:{ backgroundColor:"red" } }) </script>
b.通过数组的方式绑定：
<div id='app'> <p :style="[pStyle1,pStyle2]">我爱你，中国</p> </div> <script> new Vue({ el:'#app', data:{ backgroundColor:"red", pStyle1:{ 'background-color':"blue", 'font-size':"30px" }, pStyle2:{ 'border-bottom':"20px solid #000" } } }) </script>
6.JavaScript表达式：
在属性绑定和变量读取中，可以使用表达式，常见的表达式有：变量读取，变量运算，三目运算符，函数调用，取反等。代码如下：
<div id='app'> <div :style="{color:danger?'red':'black'}">三目运算符执行：{{message.split(" ").reverse().join(" ")}}</div> <!--split分割，reverse翻转，join数据转字符串--> <div>调用方法的执行结果：{{greet()}}</div> <div>这个是！取反的：{{!istest}}</div> </div> <script> new Vue({ el:'#app', data:{ //条件？条件成立的值：条件不成立的值---三目运算符 danger:true, message:"hello word", istest:true }, methods:{ greet(){ return "自己定义的函数要放在methods中," } } })
7.条件判断：有v-if,v-else-if,v-else。如果有多个元素渲染要用template标签，vue默认会重用相同标签，入过不想被重用加上key属性。
a.单个标签显示的：
<div id='app'> <p v-if="tianqi=='sun'">钓鱼</p> <p v-else-if="tianqi=='rain'">打游戏</p> <p v-else>睡觉</p> </div> <script> new Vue({ el:'#app', data:{ tianqi:"rain" } }) </script>
b.多个标签显示的：
<div id='app'> <template v-if="age<18"> <p>第一个模板</p> <p>第二个模板</p> </template> <template v-else-if="age>=18"> <p>第三个模板</p> <p>第四个模板</p> </template> </div> <script> new Vue({ el:'#app', data:{ age:4 } }) </script>
8.v-show和v-if的区别：都是判断使用，v-show只有一个，标签不能在template中使用，代码如下：
<div id='app'> <div v-show="logintype=='username'"> <label for="">用户名：</label> <input type="text" name="username" placeholder="密码" key="username"> </div> <div v-show="logintype=='email'"> <label for="">邮箱:</label> <input type="text" name="email" placeholder="邮箱" key="email"> </div> <button @click="changeLogintype">切换登录方法</button> </div> <script> new Vue({ el:'#app', data:{ tianqi:"rain", age:4, logintype:"username" }, methods:{ changeLogintype(){ this.logintype = this.logintype=='username'?"email":"username" } } }) </script>
9.v-for循环：语法 变量 in 循环体
a. 数组循环：<tr v-for="book in books">，如果要循环下标，接个圆括号就OK了，但是位置第一个是对象，第二个才是下标
b. 对象循环：和循环数组是一样的，区别就是循环的时候是value，key，代码如下：
<div id='app'> <!-- 表格table，表头thead，表格行tr，列th,表单体tbody,下面的index是加的序号，是0开始的，注意的是第一个是对象，第二个是下标，位子是固定的--> <table> <thead> <tr> <th>序号</th> <th>标题</th> <th>作者</th> </tr> </thead> <tbody> <!-- <tr v-for="book in books"> <th>{{book.title}}</th> <th>{{book.author}}</th> </tr> --> <tr v-for="(book,index) in books"> <th>{{index+1}}</th> <th>{{book.title}}</th> <th>{{book.author}}</th> </tr> </tbody> </table> <div v-for="(value,key) in users"> {{key}}:{{value}} </div> </div> <script> new Vue({ el:'#app', data:{ books:[{ 'title':'坏蛋是怎样炼成的1', 'author':'六道' }, {'title':'坏蛋是怎样炼成的2', 'author':'七道' }, {'title':'坏蛋是怎样炼成的3', 'author':'八道' }], users:{ "username":"张三", "age":"24" } } }) </script>
10.v-for 循环状态保持
默认情况下，数组中的顺序发生变化重新渲染的时候，vue会重新利用之前的元素，不会重新排序，可以添加一个key属性，key只能是数字或者字符串，一般是用循环出来的对象的某个唯一的值。vue2.2以上的vue-for中key是必须的。代码如下:
<div id='app'> <div v-for="book in books" :key="book.title"> <label>标题</label> <input type="text" :placeholder="book.title"> </div> <button @click="changeBookSort">改图书顺序</button> </div> <script> new Vue({ el:'#app', data:{ books:[{ 'title':'坏蛋是怎样炼成的1', 'author':'六道' }, {'title':'坏蛋是怎样炼成的2', 'author':'七道' }, {'title':'坏蛋是怎样炼成的3', 'author':'八道' }], users:{ "username":"张三", "age":"24" } }, methods:{ changeBookSort(){ this.books.sort(function(a,b){ return Math.random(0,1)-0.5 }) } } }) </script>
11.触发视图更新
a.直接赋值更新 this.heros=[],模板会立即更新，代码如下：
<div id='app'> <ul> <li v-for="hero in heros" :key="hero"> {{hero}} </li> </ul> <button @click="update">更新</button> </div> <script> new Vue({ el:'#app', data:{ heros:['鸡毛飞上天','北京爱情故事','奋斗'], user:{"username":"张三"} }, methods:{ update(){ this.heros = ['三毛流浪记'] } } }) </script>
b.通过函数更新 this.heros.push("xx")代码如下：
<div id='app'> <ul> <li v-for="hero in heros" :key="hero"> {{hero}} </li> </ul> <button @click="pushhero">添加一个元素</button> </div> <script> new Vue({ el:'#app', data:{ heros:['鸡毛飞上天','北京爱情故事','奋斗'] }, methods:{ pushhero(){ this.heros.push("三毛流浪记") } } }) </script>
c.函数可以直接视图更新的有：
push()添加元素的方法：this.heros.push("三毛流浪记")
pop()删除数组中最后一个元素：this.heros.pop()
shift()删除数组中第一个元素：this.heros.shift()
unshift(itme):在数组开头位置添加一个元素：this.heros.unshift('西游记')
splice(index,howmany,item1,...,itemN):向数组中添加或删除或者替换元素
向heros第0个位置添加元素 this.heros.splice(1,0,"splice添加"),index:从第几个开始操作，howmany：操作几个元素，item1：操作的参数
下标从0开始删除2个元素 this.heros.splice(0,2)
下标从0开始替换2个元素 this.heros.splice(0,2,"splice替换",'splice替换')
sort(funcion)排序:this.heros.sort(funcion(x,y)){a=Math.random(); return}
reverse()将数组元素进行反转：this.heros.reverse()
d.以上都是可以触发更新的，不能触发更新的有：过滤用的filter,字符串拼接的concat,切片的slice。可以进行操作之后赋值才让他直接更新,代码如下：
<div id='app'> <ul> <li v-for="hero in heros" :key="hero"> {{hero}} </li> </ul> <button @click="concathero">两个数组拼接赋值显示</button> </div> <script> new Vue({ el:'#app', data:{ heros:['鸡毛飞上天','北京爱情故事','奋斗'] }, methods:{ concathero(){ this.heros=this.heros.concat(['张三','李四']) } } }) </script>
e.如果想要在对象上新增一个属性，只能通过Vue.set来实现。想要通过下标修改数组中的值并让立即更新，也只能使用Vue.set来实现，代码如下：
<div id='app'> <ul> <li v-for="hero in heros" :key="hero"> {{hero}} </li> </ul> <div v-for="(value,key) in user"> {{key}}:{{value}} </div> <button @click="updateArray">更新数组</button> <button @click="updateOjject">更新数组</button> </div> <script> new Vue({ el:'#app', data:{ heros:['鸡毛飞上天','北京爱情故事','奋斗'], user:{"username":"张三"} }, methods:{ updateArray(){ Vue.set(this.heros,0,'哇哈哈') }, updateOjject(){ // this.user.username='增拉萨' Vue.set(this.user,'age',18) } } }) </script>
12.事件绑定
a.可以直接把代码放在元素上
b.可以把代码放在函数中然后在@事件后面写上函数名称
c.常规的写法是v-on,简写是@+事件名
d.可以传递参数，也可以传递$enent这个特殊参数
e.常见的修饰符： a. .stop: event.stopPropagation,阻止事件冒泡
b. .captuer 事件捕获
c. .once 这个事件只执行一次
d. .self 代表当前这个被点击的元素自身
e. .passive 在当前滚动的时候告诉浏览器不会阻止默认行为，可以使滚动流畅
f. .prevent 阻止浏览器跳转
f.代码如下：
<div id='app'> <ul> <li v-for="book in books" :key="book" v-on:click="liCilck(book)"> {{book}} </li> </ul> <!-- <a href="https://www.baid.com" @click="gotozto($event)">到大运</a> --> <a href="https://www.baid.com" @click.prevent="gotozto($event)">到大运</a> </div> <script> new Vue({ el:'#app', data:{ books:['坏蛋是怎样练成的',"钢铁是怎样练成的"] }, methods:{ liCilck(value){ console.log(value); }, gotozto(event){ // event.preventDefault() //这两个注释代码成对使用 window.location="http://www.kuaiyun.net.cn" } } }) </script>