前端技术：vue(模板语法)

一、模板的理解

	1) 动态的 html 页面 
	2) 包含了一些 JS 语法代码 a. 双大括号表达式 b. 指令(以 v-开头的自定义标签属性)

二、插值（“Mustache”语法及双大括号表达式）

	1) 语法: {{msg}} 
	2) 功能: 向页面输出数据 
	3) 可以调用对象的方法

三、指令1：强制数据绑定

	1) 功能: 指定变化的属性值 
	2) 完整写法: v-bind:xxx='yyy' //yyy 会作为表达式解析执行
	3) 简洁写法: :xxx='yyy'

四、指令2：绑定事件监听

	1) 功能: 绑定指定事件名的回调函数
	2) 完整写法: v-on:keyup='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
	3) 简洁写法: @keyup='xxx' @keyup.enter='xxx'

	vue常用指令：
	
	v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
	v-for 格式： v-for="字段名 in(of) 数组json"  循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index
	v-show 显示内容 （同angular中的ng-show）
	v-hide  隐藏内容（同angular中的ng-hide）
	v-if       显示与隐藏  （dom元素的删除添加 同angular中的ng-if 默认值为false）
	v-else-if  必须和v-if连用
	v-else  必须和v-if连用  不能单独使用  否则报错   模板编译错误
	v-bind  动态绑定  作用： 及时对页面的数据进行更改
	v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数  函数必须写在methods里面
	v-text   解析文本
	v-html   解析html标签
	v-bind:class   三种绑定方法  1、对象型  '{red:isred}'  2、三元型   'isred?"red":"blue"'   3、数组型  '[{red:"isred"},{blue:"isblue"}]'
	v-once  进入页面时  只渲染一次 不在进行渲染
	v-cloak  防止闪烁
	v-pre  把标签内部的元素原位输出

代码示例

    
    
    

        
双大括号表达式
        
{{url}}
        
{{msg.toUpperCase()}}
        

        

        
指令：强制数据绑定
        
        
指令：绑定事件监听
        测试
        测试2