Vue初学者需要掌握的知识点及案例

什么是Vue

前端框架的三大马车（按时间顺序）：

angular 谷歌公司 m(数据) v(视图) c(控制器) 双向数据绑定
react facebook 视图层的框架view 虚拟dom
vue 尤玉溪双向数据绑定+虚拟dom 是一套用于构建用户界面的渐进式框架
入门难度最低

为什么要学习Vue

高效

运行效率高采用虚拟dom 减少真实dom的操作使项目的运行效率大大提高
开发效率高采用了组件化开发
将开发者的精力从dom操作解放出来，转移到数据操作上

dom操作极其影响效率，是制约效率的关键，要减少dom
修改内存中的数据（变量）消耗的资源远远小于dom操作
虚拟dom 就是一个内存中的一个对象该对象有一个特点和dom有相同的结构

爱上Vue

一旦熟悉，就情不自禁的用Vue,会抛弃原来二阶段的写法（直接操作dom）

Vue的实例化

①

/*1、下载引入
2、找到一个dom元素 这个dom元素要被vue控制
3、在js中实例化Vue*/<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1vue的实例化</title><script src='../vue.js'></script>
</head>
<body><!-- 和实例绑定了 就会用vue的语法进行处理 --><div id='xixi'>{{name}} {{data}}</div><!-- 没有被实例绑定 和原始的页面没有区别 --><div id='hehe'>{{name}}</div>
<script>// 创建一个vue的实例
let vm =new Vue({el:"#xixi", // 将vue的实例和dom中的某一个元素进行绑定 绑定的元素以及子节点都会被实例进行处理data:{      // data里的数据直接可以通过插值法 {{表达式变量}} 进行渲染name:'你好世界'}
})</script>
</body>

②

<body>
<!--简单来说，就是两个大括号，中间放表达式，就叫“Mustache插值法”--><!-- 和实例绑定了 就会用vue的语法进行处理 --><div id='xixi'>{{name}} {{data}}</div><!-- 没有被实例绑定 和原始的页面没有区别 --><hr><div id='hehe'>{{name}}</div>
<script>// 创建一个vue的实例
let vm =new Vue({el:"#xixi", // 将vue的实例和dom中的某一个元素进行绑定 绑定的元素以及子节点都会被实例进行处理data:{      // data里的数据直接可以通过插值法 {{表达式变量}} 进行渲染name:'你好世界'}
})let  vm2= new Vue({el:'#hehe',data:{name:'韩梅梅'}
})
// 在一个页面可以实例化多个vue实例 每一个实例绑定自己的元素 数据不通用
</script>
</body>

数据绑定

<body>
<div id="app">{{text}}<hr>{{arr}}<hr>{{obj}}<hr>{{num}}<hr>{{null?'真的':'假的'}}<hr>{{undef?'真的':'假的'}}<hr>{{boolean}}</div>
<script>let vm = new Vue({el:'#app',data:{boolean:false,text:'这里是文本',arr:['呵呵','嘻嘻'],obj:{us:123,ps:456},num:123,null:null,undef:undefined}})
// 将data中的数据在视图中使用（view） 这个过程叫数据绑定 方向 data->view
// 正常的数据类型都可以绑定并显示  特殊的 null undefined 只能绑定不能显示
// {{}} 插值法内部 放的是变量和表达式
</script>
</body>

指令 directive

指令后面跟的都是表达式或变量

内置指令 vue内部提供的直接使用
自定义指令实现自定义某些功能的指令

条件渲染
都可以控制一个元素的显示或者隐藏

v-show 通过样式 display：none

v-if 直接控制div元素有还是没有

（v-else v-elseif）

v-if如果为真，则不渲染v-else

事件绑定
使用vue中的事件

v-on：事件名（和原生js的事件名一致）:事件处理函数

@事件名：事件处理函数

事件的处理函数写在实例的配置项 motheds

处理函数的默认参数是事件对象
如果需要传递其他参数事件对象需要通过’$event 手动传递

属性绑定
v-bind

一般元素的属性都是跟固定的值

而属性绑定可以实现属性的后方跟变量或者表达式

v-bind:要绑定的属性名

简写：“:要绑定的属性名”

eg:

<img v-bind:src="">   或者   <img :src="">

列表渲染
v-for 数组表格数字字符串都可以用v-for来进行循环

绑定一个标签循环一个数据源

（循环数组）
<li v-for = '循环数据的每一项 in/of 要循环的数据'></li>
<li v-for = '(循环数据的每一项,每一项的下标) in/of 要循环的数据'></li>
（循环对象）
<li v-for = '（对象value,对象里的key，下标) in 要循环的对象'>{{key}}:{{value}}</li>

双向数据绑定
v-model将input框的value和data里的数据进行绑定任何一方发生改变另一方都会跟着改变相当于事件绑定和属性绑定的综合

可以绑定一个表单元素的value 修改表单元素的

data里的数据也会发生改变

v-model 所有的表单元素都可以用组件也可以用

v-model 可以说就是给它绑定了一个事件，还绑定了一个值

使用vue做数据与页面之间处理时的思路：

寻找数据与页面的关系
通过指令将数据与页面进行绑定
更改数据页面会自动变化

①

<style>.test{width: 100px;height: 100px;background: lightgreen;}.test2{width: 100px;height: 100px;background: skyblue;}</style>
</head>
<body>
<div id = 'app'>{{name}}<div v-if='show' class="test"></div><div v-else class ='test2'></div>
</div>
<script>
let vm = new Vue({el:'#app',data:{name:'韩梅梅',show:false}
})
/*
v-if 是一个指令 条件渲染 控制一个元素的渲染不渲染
<目标元素 v-if='变量或者表达式'></目标元素>
指令后面跟是变量或者表达式
官方文档 文档查找 v-elseif 的用法
*/ </script>
</body>

②

 <script src='../vue.js'></script><style>.test{width: 100px;height: 100px;background: lightgreen;}.test2{width: 100px;height: 100px;background: skyblue;}</style>
</head>
<body>
<div id = 'app'><div v-show ='show' class="test"></div>
</div>
<script>
let vm = new Vue({el:'#app',data:{show:false}
})/*
v-show 可以控制元素的显示隐藏或者通过display none 不管显示还是隐藏元素都是存在
v-if   控制元素的渲染  v-if为假 该元素都不会创建
*/ </script>
</body>

事件绑定

使用vue中的事件
v-on：事件名（和原生js的事件名一致）:事件的处理函数
@事件名:事件处理函数

事件的处理函数写在实例的配置项 motheds

处理函数的默认参数是事件对象

如果需要传递其他参数事件对象需要通过

`$event 手动传递

<script src='../vue.js'></script><style>.test{width: 100px;height: 100px;background: lightgreen;}.test2{width: 100px;height: 100px;background: skyblue;}</style>
</head>
<body>
<div id = 'app'><!-- <button οnclick='fun()'>toggle</button> --><button v-on:click='toggle(1,2,$event)'>toggle</button><button @click = 'toggle2'>toggle2</button>
</div>
<script>
let vm = new Vue({el:'#app',data:{show:false},methods: {  //vue中写事件函数的地方toggle:(num1,num2,e)=>{console.log('点到我了',num1,num2,e)},toggle2(){console.log('点到第二个了')}},
})/*
固定写法（规范）：v-on:事件名='事件处理函数' 事件名和原生js一样
onclick ->  v-on:click
onblur  ->  v-on:blur
事件处理函数一定要写在实例的 methods内部
默认参数（啥参数都不传都有的参数）是事件对象
如果有其他参数 事件对象需要通过 $event 手动传递    只要碰到$相关的，都是vue内置的
简写方式:
v-on:click  ===  @click
*/ </script>
</body>

数据的响应式

<script src='../vue.js'></script><style>.test{width: 100px;height: 100px;background: lightgreen;}.test2{width: 100px;height: 100px;background: skyblue;}</style>
</head>
<body>
<div id = 'app'>{{num}}<button v-on:click='add'>add</button>
</div><script>
let vm  = new Vue({el:"#app",data:{num:1},methods: {add(){console.log(this)//指代当前vue的实例对象this.num++}},
})
/*
数据的响应式
数据变 页面自动变 不需要开发者操作dom
vue特点之一：将开发者的精力从dom操作解放 转移到数据操作上
*/ </script>
</body>

数据的响应式demo

<script src='../vue.js'></script><style>.test{width: 100px;height: 100px;background: lightgreen;}.test2{width: 100px;height: 100px;background: skyblue;}</style>
</head>
<body>
<div id = 'app'><div v-if='show' class='test'></div><button @click='toggle'>toggle</button>
</div><script>
let vm  = new Vue({el:"#app",data:{show:true},methods: {toggle(){this.show=!this.show}}
})/*（动的仅仅只是数据，实现效果点按钮就能控制div显示隐藏）
用一个按钮控制div的显示隐藏
1.先让div显示隐藏
2.找到控制div显示隐藏的数据
3.用按钮去修改他
*/
</script>
</body>

属性绑定 v-bind

  v-bind元素的属性都是跟的固定的值属性绑定可以实现 属性的后方跟变量或者表达式v-bind：要绑定的属性名 <img v-bind:src=''>:要绑定的属性名  <img :src=''>

<script src='../vue.js'></script><style>.test{width: 100px;height: 100px;background: lightgreen;}.test2{width: 100px;height: 100px;background: skyblue;}</style>
</head>
<body>
<div id = 'app'><img src="url" alt=""><img v-bind:src="url" alt=""><img :src="url" alt="">
</div><script>
let vm  = new Vue({el:"#app",data:{url:'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2164734927,1367682520&fm=26&gp=0.jpg'}})/*
属性绑定 v-bind
<img src=''>
<div width height class id >
src  width height class id .....都叫属性
属性后面跟的是固定字符串
作用：属性绑定可以让属性后面跟变量或者表达式
简写  v-bind:src === :src
*/
</script>
</body>

属性绑定案例

<script src='../vue.js'></script><style>.test{width: 100px;height: 100px;background: lightgreen;}.test2{width: 100px;height: 100px;background: skyblue;}</style>
</head>
<body>
<div id = 'app'><div v-bind:class='toggle?"test":"test2"'></div><button @click='change'>toggle</button>
</div><script>
let vm  = new Vue({el:"#app",data:{toggle:false},methods: {change(){this.toggle=!this.toggle}},})/*
通过一个按钮控制div颜色的改变
1.div 能改变颜色
2.找一个数据和改变颜色做关联
3.按钮控制这个数据的修改
*/
</script>
</body>

列表渲染

v-for

<title>属性绑定v-bind</title><script src='../vue.js'></script><style></style>
</head>
<body>
<div id = 'app'><ul><!-- 循环数组 --><!-- <li v-for = 'item in lists'>{{item}}</li> --><!-- <li v-for = '(item,index) in lists'>{{item}}{{index}}</li> --><!-- <li v-for = '(hehe,xixi) in lists'>{{hehe}}{{xixi}}</li> --><!-- 循环对象 --><!-- <li v-for="(value,key,index) in obj">{{key}}:{{value}}-{{index}}</li> --><!-- <li v-for='item in num'>{{item}}</li> --><p v-for='item in string'> {{item}}</p></ul>
</div><script>
let vm  = new Vue({el:"#app",data:{lists:['午夜凶铃','咒怨','红色高跟鞋','真实魔鬼游戏','潜伏'],obj:{us:'王一',ps:'12345',sex:'未知'},num:100,string:'周五晚上12点我们看恐怖片准备好小零食'},
})
/*
v-for 绑定一个标签 循环一个数据源
<li v-for ='循环数据的每一项 in/of 要循环的数据'></li>
<li v-for ='(循环数据的每一项,每一项的下标)in/of 要循环的数据'></li>
<li v-for="(对象value,对象里的key,下标) in 要循环的对象">{{key}}:{{value}}-{{index}}</li>
*/
</script>
</body>

用 vue实现tab选项卡

<style>*{padding: 0;margin: 0;}.box{width: 400px;height: 600px;border: 1px solid red;}.nav {list-style: none;height: 80px;width: 400px;background: skyblue;font-size: 0px;}.nav li{display: inline-block;height: 80px;width: 100px;border: 1px solid green;box-sizing: border-box;font-size: 16px;}.sel{background: yellowgreen;}.content div{width: 400px;height: 420px;background: pink;}</style>
</head>
<body>
<div id = 'app'><div class='box'><ul class="nav"><!-- v --><li v-bind:class ='item===seleted?"sel":""' v-for='item in list'v-on:click='change(item)'>{{item}}</li></ul><div class='content'><div v-show='item===seleted?true:false'v-for = 'item in list'>{{item}}</div></div></div>
</div><script>
let vm  = new Vue({el:"#app",data:{list:['爱情','动作','恐怖','科幻'],seleted:'科幻' //默认选中的一项},methods: {change(item){console.log('点到了:'+item)this.seleted = item}},
})
/*
用 vue实现tab选项卡
1. 渲染界面
2. 点击切换tab
3. 导航条高亮
4. 内容要切换a. 先把静态处理出来
b. 哪些元素可以用指令*/
</script>
</body>

todolist 能添加代办事项

 <script src='../vue.js'></script><style>.green{background: green;}.red{background: red;}</style>
</head>
<body>
<div id = 'app'>
<input type="text" placeholder="请输入要做啥子类" v-model='inputValue'
>
<!-- v-modol将input框的value 和 data里的数据进行绑定 -->
<button @click='add'>添加</button>
<ul><li v-for = '(item,index) in list'v-bind:class = 'item.state?"green":"red"'>{{item.event}}<button @click='del(index)'>del</button><!-- 已经完成显示 已完成文字  没完成显示按钮 --><span v-if='item.state'>已完成</span><button v-else @click='finish(index)'>待完成</button></li></ul>
</div><script>
let vm  = new Vue({el:"#app",data:{list:[{event:'今晚代码到天明',state:false},{event:'明晚代码到天明',state:true},{event:'明晚恐怖片到天明',state:false}],inputValue:'呵呵哒'},methods: {add(){console.log(this.inputValue)// 将用户输入的信息添加到list数据里  页面会自动发生改变this.list.push({event:this.inputValue,state:false})},del(index){console.log('要删除的下标',index)// 数组里删除点击的数据this.list.splice(index,1)},finish(index){// 将点击项的状态值改成true 就是完成this.list[index].state=true}},
})
/*
能够添加代办实现  v
显示代待办事项    v
删除代办事项     v
完成代办事项    v 1.寻找数据和页面的关系
2.通过指令将数据和页面绑定
3.更改数据 页面会自动变化
*/
</script>
</body>

双向数据绑定原理

<body>
<div id = 'app'><input type="text" @input='input' :value='value'> <p>{{value}}</p>
</div><script>
let vm  = new Vue({el:"#app",data:{value:'你好'},methods: {input(e){console.log(e.target.value)this.value=e.target.value}},})/*
在input 框输入的内容可以在p元素显示出来
*/
</script>
</body>

双向数据绑定实现 v-model

<body>
<div id = 'app'><input type="text" v-model='hehe'>{{hehe}}
</div><script>
let vm  = new Vue({el:"#app",data:{hehe:'你好'},})/*
v-model 叫双向数据绑定 相当于 事件绑定和属性绑定的综合
可以绑定一个表单元素的value 修改表单元素的
data里的数据也会发生改变
v-model
所有的表单元素都能用
组件也可用
*/
</script>
</body>