vue学习指南1

vue是什么

vue是构建用户界面的渐进式1渐进式2MVVM框架，其中html是view层，js是model层通过v-model指令完成底层逻辑，实现绑定的效果。

vue的基本语法

vue的构造函数

通过vue构造函数创建一个vue实例

"#el">
var vm=new Vue({
      el:“#el",
      data:{},
      methods:{}
})
var MyComponent=Vue.extend({})
var vm=new MyComponent({})

Vue实例的属性和方法

vue实例将代理data对象的所有属性，也就是说部署在data对象上所有的属性和方法将直接成为Vue的实例的属性和方法

 
"app">{{message}}
    "sayhello">click
  
var vm=new Vue({
  el:'#app',
  data:{
    message:'nihao',
    sayhello:function(){
      console.log('1');
    }
  }
});

Vue数据绑定操作

绑定文本和html

<div id="app">{{msg}}
    <div v-html="hi">div>
div>
var vm=new Vue({
  el:'#app',
  data:{
      msg:'nihao',
      hi:'<h1>你好h1>'
  }
})

解读：

• HTML部分实现数据的动态绑定，这个数据是vue实例的属性值；
• JS部分的语法可以从jQuery角度去理解，相当于创建一个Vue实例，这个实例指向#app，并在Vue提供的固定接口data上定义Vue实例的属性；
• 使用{{message}}的mustache语法只能将数据解释为纯文本，为了输出HTML，可以使用v-html指令；

绑定数据在元素的属性

"app" v-bind:title="message" v-bind:style="red" v-once>
    {{message}}
  
var vm=new Vue({
  el:'#app',
  data:{
    message:'ceshi',
    red:'color:red'
  }
});

解读：

• 定义在Vue实例的data接口上的数据的绑定灵活的，可以绑定在DOM节点内部，也可以绑在属性上；
• 绑定数据到节点属性上时，需要使用v-bind指令，这个元素节点的 title属性和 Vue 实例的 message属性绑定到一起，从而建立数据与该属性值的绑定，也可以使用v-bind:href="url"的缩写方式:href="url"；
• v-once指令能够让你执行一次性的插值，当数据改变时，插值处的内容不会更新；

使用JS表达式处理数据

<div id="app">
    <div v-once>{{ num+20 }}div>
    <div>{{message+'e'}}div>
    <ol>
      <li v-for="items in item">{{items.message}}li>
    ol>
var vm=new Vue({
  el:'#app',
  data:{
    num:20,
    message:'hello',
    item:[
      {message:'react'},
      {message:'angular'},
      {message:'vue'}
    ]
  }
});

使用过滤器来操作

 
"app">
    
if="seen">{{message | capitalize}}
  
var vm=new Vue({
   el:'#app',
   data:{
     message:'',
     seen:true
   },
  filters:{
    capitalize:function(value){
      if(!value) return '没有数据';
        value=value.toString();
        return value.charAt(0).toUpperCase();
    }
  }
});

条件指令控制DOM元素显示

"app">
    
if="seen">{{message}}
  
var vm=new Vue({
  el:'#app',
  data:{
    message:"show",
    seen:false
  }
});

解读：

• v-if指令可以绑定一个属性值为布尔型的属性，当值为真时，元素将显示，反之则消失；

循环指令实现数据的遍历

 
"app">
    

      
for="items in item">{{items.message}}
    
  
var vm=new Vue({
  el:'#app',
  data:{
    item:[
      {message:'angular'},
      {message:'react'},
      {message:'vue'}
    ]
  }
});

解读：

• v-for可以绑定数组型数据进行绑定，并使用item in items形式，从而数据的遍历操作；

事件绑定指令可以实现事件监听

 
"app">
    
{{message}}
    'change'>click
  
var vm=new Vue({
  el:'#app',
  data:{
    message:'hello world'
  },
  methods:{
    change:function(){
      this.message=this.message.split('').reverse().join('');
    }
  }
});

解读：

• v-on指令用于监听事件操作，click="reverseMessage"定义点击事件后执行的回调函数；
• v-on指令也可以采用缩写方式：@click="method"
• 在Vue实例中，提供methods接口用于统一定义函数；

小结:本章涉及Vue的基础的数据绑定操作，内容包括：

• {{message}}实现文本数据的绑定，并且文本数据可以使用JS表达式和过滤器进行进一步处理；-v-html="hi"实现HTML数据的绑定；
• v-bind:href="url"实现属性数据的绑定；
• v-if="seen"和v-for="item in items"指令实现流程控制；
• v-on:click="method"指令实现事件监听