Vue基础：

admin

1，实例与数据：

1. <div id="app"></div>

复制代码

1. var app = new Vue({
   
2.         el:'#app',  //document.getElementById('app')
   
3.     });

复制代码

2，生命周期
create：实例创建完成后调用，初始化数据用
mounted：挂载到实力上后会使用，一般第一个业务逻辑会从这里开始
beforeDestroy：实例销毁之前调用，主要解绑一些监听事件

1. var app = new Vue({
   
2.         el:'#app',
   
3.         data: {
   
4.             a:2,
   
5.         },
   
6.         create:function () {
   
7.             //实例创建完成后调用，初始化数据用
   
8.         },
   
9.         mounted:function () {
   
10.             //挂载到实力上后会使用，一般第一个业务逻辑会从这里开始
    
11.         },
    
12.         beforeDestroy:function () {
    
13.             //实例销毁之前调用，主要解绑一些监听事件
    
14.         },
    
15.     });

复制代码

3，插值与表达式

1. <div id="app">
   
2.     {{message}}
   
3. </div>

复制代码

1. var app = new Vue({
   
2.         el:'#app',
   
3.         data: {
   
4.             message:'hellow word',
   
5.         },
   
6.     });
   
7.     console.log(app.message)

复制代码

直接输出html：v-html

1. <span v-html="link"></span>

复制代码

1. data: {
   
2.             link:'<a href="#">这是一个连接</a>',
   
3.         },

复制代码

想显示{{}}标签，而不被替换 v-pre

三元运算

1. {{isOk ? '确定' : '取消'}}

复制代码

1. data:{
   
2.             isOk:false,
   
3.         },

复制代码

在{{}}插值的尾部添加管道符“|”对数据机型过滤，常用于格式化文本，格式规则是自定义的，vue实例添加选项filters来设置

1. {{date|formatDate}}

复制代码

1. data:{
   
2.             date: new Date(),
   
3.         },
   
4.         filters: {
   
5.             formatDate: function (value) {  //这里的value就是需要过滤的数据
   
6.                 var date = new Date(value);
   
7.             }
   
8.         }

复制代码

过滤器串联模式，过滤器传递参数的情况

1. {{message | filterA | filterB}} 过滤器串联模式
   
2.     {{message | filterA('arg1','arg2')}}    接收参数：arg1，arg2分别传给过滤器的第二个和第三个参数，因为第一个是数据本身

复制代码

事件指令： v-if

1. <p v-if="seen">现在你看到我了</p>

复制代码

1. data: {
   
2.     seen: true
   
3.   }

复制代码

事件指令：v-bind:动态更新HTML元素上的属性，比如id,clas,href等

1. <p v-if="show">显示这段文本</p>   <!--事件与指令,常用指令：v-if v-html v-pre-->
   
2. <a v-bind:href="url">链接</a><!--v-bind:动态更新HTML元素上的属性，比如id,clas,href等-->
   
3. <img v-bind:src="imgUrl">

复制代码

1. data:{
   
2.             show: true, //当值为true时 p元素将被插入，反之则会被移除
   
3.             url:'http://www.baidu.com/',            imgUrl:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
   
4.         }

复制代码

v-on绑定事件监听 click dblclick keyup等

1. <button v-on:click="handleClose">点击隐藏</button>

复制代码

1. //methods对象里面写方法

复制代码

1. methods:{
   
2.             handleClose:function () {
   
3.                 this.show = false;
   
4.             }
   
5.         }

复制代码

v-on绑定事件监听 简单的内联写法

1. <button v-on:click="show = false">点击隐藏</button>

复制代码

1. data:{
   
2.             show: true
   
3.         }

复制代码

指令语法糖：
:等同于v-bind
@等同于v-on

1. <a :href="url">链接</a>   <!--:等同于v-bind-->
   
2.     <buttom @click="handleClose">点击链接变成qq</buttom><!--@等同于v-on-->

复制代码

计算属性：都以函数的形式写在Vue的实例内的computed选项内，最终返回计算后的结果

1. {{reverseText}}

复制代码

1. data:{
   
2.     text: "123,456"
   
3. },
   
4. computed:{  //所有的计算属性都以函数的形式写在Vue的实例内的computed选项内，最终返回计算后的结果
   
5.     reverseText:function () {
   
6.         return this.text.split(',').reverse().join(',');
   
7.     }
   
8. }

复制代码

绑定class：对象语法

1. <div :class="{'active' : isactive}">222</div>
   
2. data:{
   
3.     isactive:true   //类名active依赖与数据isactive
   
4. }

复制代码

绑定class：可以传入多个属性，也可以与普通css共存

1. <div class="static" :class="{'active' : isactive, 'error' : iserror}">222</div>
   
2. data:{
   
3.     isactive:true   //类名active依赖与数据isactive
   
4.     isactive:true,   //类名active依赖与数据isactive
   
5.     iserror:false,   //类名error依赖与数据iserror
   
6. },

复制代码

绑定class：数组语法

1. <div :class="[activecls,errorcls]">11</div>
   
2. data:{
   
3.     activecls:'active',
   
4.     errorcls:'error'
   
5. }

复制代码

绑定class：三元表达式根据条件切换class

1. <div :class="[isactive ? activecls : '', errorcls]">11</div>
   
2. data:{
   
3.     isactive:true,
   
4.     activecls:'active',
   
5.     errorcls:'error'
   
6. }

复制代码

内置指令 v-cloak是解决初始化慢到时页面闪动的最佳实践

1. <style>
   
2.     [v-cloak] {
   
3.         display: none;
   
4.     }
   
5. </style>
   
6. <div id="app" v-cloak>  <!--v-cloak不需要表达式，他会在vue实例结束编译时从绑定的html元素上一出，经常和css的display none 一起使用-->
   
7.     {{message}}
   
8. </div>

复制代码

内置指令v-once 只渲染一次 不随数据的变化重新渲染 将被视为静态内容

1. <div id="app" v-once>   <!--内置指令v-once 只渲染一次 不随数据的变化重新渲染 将被视为静态内容-->
   
2.     <span v-once>{{message}}</span>
   
3.     <div v-once>
   
4.         <span>{{message}}</span>
   
5.     </div>
   
6. </div>

复制代码

条件渲染内置指令：v-if v-else-if v-else 判断单个元素时

1. <div id="app" v-once>   <!--条件渲染内置指令：v-if v-else-if v-else 判断单个元素时-->
   
2.     <p v-if="status === 1">当status为1时显示该行</p>
   
3.     <p v-else-if="status === 2">当status为2时显示该行</p>
   
4.     <p v-else>否则显示该行</p>
   
5. </div>
   
6. data:{
   
7.     message:'这是一段文本'
   
8.     status:3
   
9. }

复制代码

如果一次判断是多个元素 可以在内置的template元素上用条件指令

1. <div id="app" v-once>   <!--如果一次判断是多个元素 可以再内置的template元素上用条件指令-->
   
2.     <template v-if="status === 1">
   
3.             <p>这是一段文本</p>
   
4.             <p>这是一段文本</p>
   
5.             <p>这是一段文本</p>
   
6.     </template>
   
7. </div>
   
8. 
   
9. data:{
   
10.     status:3
    
11.     status:1
    
12. }

复制代码

v-show 和 v-if 使用方法一致，但是v-show是改变元素的css属性display,当v-show 结果为false时，元素会隐藏

1. <p v-show="status === 1">当status 为1时显示该行</p>

复制代码

列表渲染指令 v-for

1. <ul>
   
2.     <li v-for="book in books">{{book.name}}</li>
   
3. </ul>
   
4. data:{
   
5.     books : [
   
6.         {name:'《vue.js》实战'},
   
7.         {name:'《JavaScript语言精粹》'},
   
8.         {name:'《JavaScript 高级程序设计》'},
   
9.     ]
   
10. }

复制代码

v-for 遍历对象属性时，有两个可选参数，分别是键名和索引

1. <li v-for="(value, key, index) in user">
   
2.     {{index}} - {{key}} - {{value}}
   
3. </li>
   
4. data:{
   
5.     user :
   
6.         {
   
7.             name:'Aresn',
   
8.             gender:'男',
   
9.             age:26,
   
10.         }
    
11. }

复制代码

v-for 还可以迭代整数

1. <span v-for="number in 10">{{ number }} </span>

复制代码

Vue常用数组方法

1. /*
   
2. * js 数组方法：https://www.w3school.com.cn/jsref/jsref_obj_array.asp*/
   
3. /*
   
4. * Vue包含了一组观察数组编译的方法，使用他们改变数组也会出发视图更新
   
5. * push  //将新元素添加到数组的末尾，并返回新的长度。
   
6. * pop   //删除数组的最后一个元素，并返回该元素。
   
7. * shift //删除数组的第一个元素，并返回该元素。
   
8. * unshift   //将新元素添加到数组的开头，并返回新的长度。
   
9. * sort  //对数组的元素进行排序。
   
10. * reverse   //反转数组中元素的顺序。
    
11. * */
    
12. 
    
13. /*
    
14. * 有些数组方法不会改变原数组
    
15. * filter    //使用数组中通过测试的每个元素创建新数组。
    
16. * concat    //连接两个或多个数组，并返回已连接数组的副本。
    
17. * slice     //选择数组的一部分，并返回新数组。
    
18. * */

复制代码

表单v-model基本用法

1. <input type="text" v-model="message" placeholder="输入...">
   
2. data: {
   
3.     message:'',
   
4. }

复制代码

实时更新数据绑定可以用@input

1. <input type="text" @input="handleInput" placeholder="输入...">
   
2. <p>输入的内容是：{{message}}</p>
   
3. methods: {
   
4.     handleInput: function (e) {
   
5.         this.message = e.target.value;  //event.target返回触发事件的元素
   
6.     }
   
7. }

复制代码

单选按钮在单数使用是不需要v-model，直接使用v-bind绑定一个布尔类型的值

1. <input type="radio" :checked="picked">
   
2. data: {
   
3.     picked:false,
   
4. }

复制代码

如果是组合使用来实现互斥选择的效果，就需要v-model配合value来使用

1. <input type="radio" v-model="picked" value="html">
   
2. <input type="radio" v-model="picked" value="js" id="js">
   
3. <input type="radio" v-model="picked" value="css" id="css">
   
4. <p>选的项是：{{picked}}</p>
   
5. data: {
   
6.     picked:false,
   
7.     picked:'js',
   
8. }

复制代码

复选框

1. <input type="checkbox" v-model="checked" id="checked">
   
2. <lable for="checked">选择状态：{{checked}}</lable>
   
3. data: {
   
4.     checked:true,
   
5. }

复制代码

复选框组合：v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组当中

1. <input type="checkbox" v-model="checked" value="html" id="html">
   
2. <input type="checkbox" v-model="checked" value="js" id="js">
   
3. <input type="checkbox" v-model="checked" value="css" id="css">
   
4. <p>选择的项是：{{checked}}</p>
   
5. 
   
6. data: {
   
7.     checked:['html', 'css'],
   
8. }

复制代码

select选择列表ption是备选项，如果含有value属性，v-model就会优先匹配value值；如果没有，就直接匹配option的text

1. <select v-model="selected">
   
2.     <option>html</option>
   
3.     <option value="js">JavaScript</option>
   
4.     <option>css</option>
   
5. </select>
   
6. <p>选择的项是：{{selected}}</p>
   
7. 
   
8. data: {
   
9.     checked:['html', 'css'],
   
10.     selected:'css'
    
11. }

复制代码

给select添加属性 multiple就可以多选了，此时v-modle绑定的是一个数组，与复选框用法类似

1. <select v-model="selected" multiple>
   
2.         <option>html</option>
   
3.         <option value="js">JavaScript</option>
   
4.         <option>css</option>
   
5. </select>
   
6. data: {
   
7.     selected:'css',
   
8.     selected:['html','js'],
   
9. }

复制代码

在业务中，option经常用v-for动态输出，value和text也是用v-bind来动态输出的

1. <select v-model="selected">
   
2.     <option
   
3.         v-for="option in options"
   
4.         :value="option.value">{{option.text}}</option>
   
5. </select>
   
6. <p>选择的项是：{{selected}}</p>
   
7. data: {
   
8.     selected:'html',
   
9.     options:[
   
10.         {
    
11.             text:'HTML',
    
12.             value:'html',
    
13.         },
    
14.         {
    
15.             text:'JavaScript',
    
16.             value:'js',
    
17.         },
    
18.         {
    
19.             text:'CSS',
    
20.             value:'css',
    
21.         },
    
22.     ]
    
23. },

复制代码