插值

文本

数据绑定最常见的形式就是使用 {

{...}}（双大括号）的文本插值

Html

使用 v-html 指令用于输出 html 代码

表达式

Vue提供了完全的JavaScript表达式支持

{

{str.substr(0,6).toUpperCase()}}

{

{ number + 1 }}

{

{ ok ? 'YES' : 'NO' }}

<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

 

			
     								
     
			
      
				
       
					
文本
					{
    {msg}}				
				
       
					
v-html
					
        
				
				
       
					
属性
					
        									
				
       
					
表达式
					{
    {str.substr(0,6).toUpperCase()}}					{
    { number + 1 }}					{
    { ok ? 'YES' : 'NO' }}				
				
       
我的Id是js动态生成的
			
      
		
     
		

　　指令

v-if|v-else|v-else-if：

根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if

v-else上一个兄弟元素必须是v-if或者是v-else-if

 v-show：

与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

v-for：

类似JS的遍历，

遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

动态参数

从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数

<a v-bind:[attrname]="url"> ... </a>

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数

<a v-on:[evname]="doSomething"> ... </a>

注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

 

			
     								
     
			
      
				
       
					
条件指令( if elseif else)
										
        
         A
        
					
        
         B
        
					
        
         C
        
					
        
         D
        
					
        
         E
        
				
				
       
					
v-Show
										
        
         出现了
        
				
				
       
					
v-for
					
        
						
         						{
    {item}},{
    {index}}					
        
					
        
         						{
    {item}},{
    {index}}					
        
				
				
       
					
动态参数
										
        					点我				
			
      
		
     
		

　　

过滤器

全局过滤器

Vue.filter('filterName', function (value) {

   // value 表示要过滤的内容

   });

局部过滤器

new Vue({

filters:{'filterName':function(value){}}

   });

			
     								
     
			
      
				
       
					
局部过滤器
					{
    {msg}}					{
    {msg | a }}				
				
       
					
局部过滤器可串联
					{
    {msg}}					{
    {msg | a | b}}				
				
       
					
全局过滤器
					{
    {msg | c}}				
			
      
		
     
		

计算属性及监听属性

计算属性

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

computed:{}

监听属性

监听属性 watch，我们可以通过 watch 来响应数据的变化

			
     								
     
			
      
				
       
					
计算属性
					数量：					价格：					计算总价：{
    {total}}				
				
       
					
监听属性
					km:					m: