1.基本使用
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Vue的基本使用</title> <!-- 01.导包 --> <script src="./js/vue.js"></script> <script> // 03. 监听 window.onload = function () { // 04:创建vue var vm = new Vue({ // 绑定操作对象 el:'.box', data: { content: 'Vue的基本使用' } }); } </script> </head> <body> <!-- 02:div标签(设置模板变量)--> <div class="box">{{content}}</div> </body> </html>
2.基本语法
2.1.操作数据
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>操作数据</title> <script src="./js/vue.js"></script> <script> window.onload = function () { // uve对象 var vm = new Vue({ el:'.box', data:{ content:'操作数据' } }); } </script> </head> <body> <div class="box"> <p>{{content}}</p> </div> </body> </html>
2.2.修改属性
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>02-操作数据</title> <script src="./js/vue.js"></script> <script> window.onload = function () { // uve对象 var vm = new Vue({ el:'.box', data:{ content:'操作数据', linkdata:'百度链接', url:'http://www.baidu.com' } }); } </script> </head> <body> <div class="box"> <!-- 第一种. v-bind: --> <!-- <a v-bind:href="url" target="_blank">{{linkdata}}</a> --> <!-- 第二种. : --> <a :href="url" target="_blank">{{linkdata}}</a> <p>{{content}}</p> </div> </body> </html>
2.3.调用方法
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>操作数据</title> <script src="./js/vue.js"></script> <script> window.onload = function () { // uve对象 var vm = new Vue({ // 标签对象 el:'.box', // 数据和属性 data:{ content:'操作数据', linkdata:'百度链接', url:'http://www.baidu.com', count:0 }, // 方法 methods: { fnAddClick:function () { // 跨域 this.count += 1; } } }); } </script> </head> <body> <div class="box"> <!-- 第一种.v-on: --> <!-- <button v-on:click='fnAddClick'>计数器:{{count}}</button> --> <!-- 第二种.@ --> <button @click='fnAddClick'>计数器:{{count}}</button> <a v-bind:href="url" target="_blank">{{linkdata}}</a> <p>{{content}}</p> </div> </body> </html>
小结：v-bind:简写: v-on: 简写@
3.条件渲染
关键字：v-if，v-else-if，v-else，v-show
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>条件渲染</title> <script src="./js/vue.js"></script> <script> window.onload = function () { var vm = new Vue({ el:'.box', data:{ flag:4 } }); } </script> </head> <body> <div class="box"> <!-- 01:v-if --> <!-- <p v-if='flag==1'>01:v-if</p> --> <!-- 02:v-else-if --> <!-- <p v-else-if='flag==2'>02:v-else-if</p> --> <!-- 03:v-else-if --> <!-- <p v-else-if='flag==3'>03:v-else-if</p> --> <!-- 04:v-else --> <!-- <p v-else>04:v-else</p> --> <!-- 05:v-show --> <!-- <p v-show='flag==3'>05:v-show</p> --> </div> </body> </html>
小结：
1.v-show用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的。
2.注意在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突
4.列表渲染
关键字：普通列表，列表下标，有且只有一个对象，对象列表
<script> window.onload = function () { var vm = new Vue({ el:'.box', data:{ // 01: 普通列表 itemList:[1, 2, 3, 4, 5], // 02: 列表下标 indexList:['a','b','c','d'], // 03: 有且只有一个对象 objData:{ name:'小明', age:19 }, // 04: 对象列表 objList:[ { name:'小明', age:20 }, { name:'小红', age:21 } ] } }); } </script>
普通列表
<li v-for='item in itemList'>{{item}}</li>
列表下标
<li v-for='(item,index) in indexList'>角标{{index}}==数值{{item}}</li>
有且只有一个对象
<li v-for='item in objData'>{{item}}</li> <li v-for='(obj,key) in objData'>属性值{{obj}}-----属性名{{key}}</li>
对象列表
<li v-for='obj in objList'>属性值1:{{obj.name}}==属性值2:{{obj.age}}</li>
小结：该指令适用于任何html标签
5.表单输入绑定（双向数据绑定）
关键字：单行文本框、多行文本框、单选框、多选框、下拉框
<!-- 01.单行文本框 --> <input type="text" v-model='content'> <p>{{content}}</p> <!-- 02.多行文本框 --> <textarea v-model='content'></textarea> <p>{{content}}</p> <!-- 03.单选框 --> <input type="radio" name="sex" value="男" v-model='content'>男 <input type="radio" name="sex" value="女" v-model='content'>女 <p>{{content}}</p> <!-- 04.多选框 --> <input type="checkbox" name="lk" value="吃饭" v-model='like'>吃饭 <input type="checkbox" name="lk" value="睡觉" v-model='like'>睡觉 <input type="checkbox" name="lk" value="打豆豆" v-model='like'>打豆豆 <p>{{like}}</p> <!-- 05.下拉框 --> <select name="addr" v-model='address'> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> <option value="深圳">深圳</option> </select> <p>{{address}}</p>
小结：可以用 v-model 指令在表单<input><textarea><select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
6.ES6语法
关键字：语法介绍、变量声明、对象的简写、箭头函数
6.1.变量声明
let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字，这两个关键字和var的区别是，它们声明的变量没有预解析，let和const的区别是，let声明的是一般变量，const申明的常量，不可修改。
var
console.log(iNum1); // 在ES5中 声明变量使用var var iNum1 = 10; // 结果为:undefined, 因为使用 var 声明的变量, 有预解析
let
console.log(iNum1); // 在ES6中 声明变量可以使用let let iNum1 = 10; // 查看后会发现报错:iNum1 is not defined, 因为使用let 声明的变量, 没有了预解析
const
const iNum1 = 10; iNum1 = 20; // 查看后会发现报错:Assignment to constant variable, 因为使用const声明的变量, 不允许重新赋值
6.2.ES6的对象的简写
ES5的写法
// ES5的对象写法 var oObj = { name:'小明', age:20, fnGetName: function () { alert(this.name); } } // 调用 oObj.fnGetName();
或者
// 创建一个空对象 var oObj = {}; // 添加属性 oObj.name = '小明'; oObj.age = 20; // 添加方法 oObj.fnGetName = function () { alert(this.name); } // 调用 oObj.fnGetName();
ES6的写法（需要注意的是, 实现简写,有一个前提,必须变量名属性名一致）
// 定义两个变量 var name = '小明'; var age = 20; // 创建对象 var oObj = { name, age, fnGetName: function () { alert(this.name); } }; // 调用 oObj.fnGetName();
6.3.ES6的箭头函数
1.定义函数新的方式：
// 无参数无返回值 var fnTest = ()=> { alert('无参数无返回值'); } // 一个参数无返回值 var fnTest = a => { alert(a + b); } // 有参数有返回值 var fnTest = (a,b)=> { return a + b; }
2.改变this的指向
如果层级比较深的时候, this的指向就变成了window, 这时候就可以通过箭头函数解决这个指向的问题
// 定义一个对象 var oObj = { name:'小明', fnAlert: function () { setTimeout(()=>{ alert(this.name); }, 1000); } } // 调用方法 oObj.fnAlert();
7.Vue对象实例生命周期
- beforeCreate
- vm对象实例化之前
- created
- vm对象实例化之后
- beforeMount
- vm将作用标签之前
- mounted(重要时机初始化数据使用)
- vm将作用标签之后
- beforeUpdate
- 数据或者属性更新之前
- updated
- 数据或者属性更新之后
完
879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
