• Vue指令
• 文本相关指令
• 属性指令
• 事件指令
• 表单指令
  • 双向绑定
• 斗篷指令
• 条件指令
  • 指令案例
• 循环指令
  • 条件
  • 循环指令案例（留言案例）
  • splice的用法
• todolist案例
• A作业（必做）
  • 冒泡排序
• B作业（选做）
• 知识点总结

Vue指令

文本相关指令

    
    
{{ msg }}
    
    
原文本
    
    

    
    
{{ msg }}

属性指令

事件指令

表单指令

1. v-model针对于表单元素

2. 提交必须在表单中

3. v-model="控制value的变量"

4. v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

   按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

    
    

        
        
        

            
            
            
        

        
        

            
            
            男：
            女：
            {{ ra_val }}
        

        
        
        
        

            
            {{ sin_val }}
        

        
        
        

            
            
            
            {{ more_val }}
        
    

双向绑定

同时绑定一个值，是虚拟DOM来不断的渲染现存的DOM

斗篷指令

1. 避免页面闪烁
2. v-cloak针对于斗篷指令

 



    
{{ msg }}
    
{{ msg }}
    
{{ msg }}
    
{{ msg }}
    
{{ msg }}
    
{{ msg }}

条件指令

v-if和v-show的区别
条件渲染的值为true|false
true代表标签显示方式渲染

1. v-if：false v-if不渲染到页面

2. v-show ：v-show以display:none渲染到页面,但也不会显示

   
       
   if指令
       
   show指令
       
   
   
   
   
   
   

   1. v-if是一个家族，包含v-if,v-else-if,v-else

   2. v-if相关分支操作,在未显示情况下,是不会被渲染到页面中

   3. 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度

   4. v-else分支只要在所有上分支都为假时显示，且不需要条件

   5. 如果没有v-else,v-if在遇到下一个v-if也会结束

        
        
if指令
        
show指令

        
        
if分支
        
elif分支1
        
elif分支2
        
else分支
        

指令案例

    
    
    



    

        
        红
        
        黄
        绿
    
    

        

        

        

    

sessionStorage的生命周期与页面标签绑定，当标签页被关闭，数据库被清空
localStorage是前台永久数据库
测试
sessionStorage.name = '123';
localStorage.name = 'xyz';
清空
localStorage.clear();

循环指令

v-for,也可以多层嵌套

        
{{ v }}

    
        
        
        

            
第{{ i }}元素：{{ v }}
        
        
        

            
{{ v }}
        
        

            
{{ k }}:{{ v }}
        
        

                
            
{{ i }}-{{ k }}:{{ v }}
        
        

        

            

                

                
{{ k }}:{{ v }}
            
        

    

条件

循环指令案例（留言案例）

数组的增
push pop unshift shift splice
this.comments.unshift(this.msg);
this.comments.splice(0,0,0);

    

        
        留言
        

            
{{ v }}
        
    

splice的用法

主要用于对数组的操作

// 数组操作万能方法，可以完成增删改
let arr = [1, 2, 3];
// 参数：开始索引，操作长度，操作的结果们
arr.splice(2, 0, 100);
arr.splice(1, 1);
console.log(arr);

todolist案例

    

        
        提交
    
    

        
{{ v }}
    
    {{ list }}

A作业（必做）

1、先有一下成绩单数据

scores = [
	{ name: 'Bob', math: 97, chinese: 89, english: 67 },
	{ name: 'Tom', math: 67, chinese: 52, english: 98 },
	{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
	{ name: 'Ben', math: 92, chinese: 87, english: 59 },
	{ name: 'Chan', math: 47, chinese: 85, english: 92 },
]

用table表格标签渲染以上数据，表格第一列是学生总分排序，最后一列是学生总分；

    
成绩单
    

        

        

            
sort
            
name
            
math
            
chinese
            
english
            
total
        
        
        

        

            
{{ i+1 }}
            
{{ v }}
        
        
    

冒泡排序

    let arr = [1, 4, 2, 5, 3];
    for (let i = 0; i < 5 - 1; i++) {
        for (let j = 0; j < 5 - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                // arr[j] ^= arr[j+1];
                // arr[j+1] ^= arr[j];
                // arr[j] ^= arr[j+1];
                let t = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = t;
            }
        }
    }
    console.log(arr);

2、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。

     
        {{ i+1 }}
		{{ v }}
     

B作业（选做）

1、还是采用上方相同的数据，添加筛选规则：
i）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科

        chinese
        math
        english

new Vue({
        el: '#app',
        data: {
            scores: total_scores,
            rule:"",
        },
        methods:{
            clickAction(rule){
                this.rule=rule
            }
        }
    });

? ii）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果
? 举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据

        chinese
        math
        english
        
        ~
        

    

    
        {{ i+1 }}
        {{ v }}
    


    
        {{ i+1 }}
        {{ v }}
    


    
        {{ i+1 }}
        {{ v }}
    


    
        {{ i+1 }}
        {{ v }}
	

   new Vue({
        el: '#app',
        data: {
            scores: total_scores,
            rule: "",
            min: "",
            max: ""
        },
        methods: {
            clickAction(rule) {
                this.rule = rule
            },

        }
    });

知识点总结

1、v-model完成表单指令，简单的控制value，单选框中的使用，单独复选框的使用以及复选框中的使用
	

2、了解：斗篷指令解决页面闪烁
	v-cloak =>  [v-cloak] {display:none} => 加载vue就会清除v-cloak属性

3、条件指令v-if与v-show区别，v-if家族成员以及上分支会成立会屏蔽下分支的工作机制
	v-if不渲染隐藏 | v-show以display:none渲染隐藏
	v-if | v-else-if | v-else

4、循环指令v-for如何循环渲染字符串、数组、字典，以及需要嵌套循环渲染赋值结构
	v-for="v in str"  v-for="（v,i) in str"
	v-for="v in arr"  v-for="（v,i) in arr"
	v-for="v in dic"  v-for="（v,k) in dic"  v-for="（v,k,i) in dic"
	[{},{}] {a:[]} [str1,str2]

5、了解：delimiters实例成员解决插值表达式符号冲突
	delimiters: ['{{', '}}']

6、计算属性(方法属性)在computed中声明，方法内部变量会被监听，值来源于方法返回值
	computed: {
		methodAttr() {
			// 内部出现的变量都会被监听，发生值更新会回调该方法
			return '方法属性的值'
		}
	}

7、监听watch可以设置数据的监听方法，在监听属性更新时，完成特定逻辑
	watch: {
		attr() {
			// attr属性被监听，发生值更新会回调该方法
		}
	}

8、重点：组件的概念，组件就是vue实例(对象)
	

		
		
	
	
	let tag = {
		template: '
子组件
'
	}
	
	new Vue({
		el: '#app',
		components: {
			tag,
		}
	})