VUE简介

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统

文本插值

<div id="app"> {{ message }}</div>

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})

绑定DOM元素属性

<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span></div>

var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() }})

控制切换一个元素的显示（seen为true，则<p>显示，为false，则<p>不显示）

<div id="app-3"> <p v-if="seen">现在你看到我了</p></div>

var app3 = new Vue({ el: '#app-3', data: { seen: true }})

绑定数组渲染项目列表

<div id="app-4"> <ol> <li v-for="todo in todos"><!--遍历todos数组里面的项目,todo可以任意取名，用于每次遍历时存储数组里面的项--> {{ todo.text }}<!--遍历之后，选择要显示的内容，此处表示显示数组中每一项的text--> </li> </ol></div>

var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] }})

v-on指令绑定事件监听器

<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆转消息</button><!--事件发生时要执行的函数，此处为click事件，要执行的函数名字为reverseMessage--></div>

var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: {//methods表示各种事件发生时执行的函数集合，可以同时写多个函数，不同事件发生时可以对应不同的函数 reverseMessage: function () {//reverseMessage函数代码 this.message = this.message.split('').reverse().join('')//将message拆分成的单个的字符，然后反向，最后再拼起来 } }})

v-model指令实现表单输入和应用状态之间的双向绑定（页面输出部分可以根据输入内容实时更改）

<div id="app-6"> <p>{{ message }}</p> <input v-model="message"></div>

var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' }})

组件
几乎任意类型的应用界面都可以抽象为一个组件树

在VUE中，一个组件本质上是一个拥有预定义选项的一个VUE实例

// 定义名为 todo-item 的新组件Vue.component('todo-item', {//'todo-item'为定义的组件名字 template: '<li>这是个待办项</li>'//template里面写组件的代码})

现在你可以用它构建另一个组件模板：

<ol> <!-- 创建一个 todo-item 组件的实例 --> <todo-item></todo-item><!--创建一个组件直接用组建名组成的闭合标签即可--></ol>

使组件接收属性

Vue.component('todo-item', { // todo-item 组件现在接受一个 // "prop"，类似于一个自定义属性 // 这个属性名为 todo。 props: ['todo'], template: '<li>{{ todo.text }}</li>'})

现在，我们可以使用 

v-bind

 指令将 todo 传到每一个重复的组件中：

<div id="app-7"> <ol> <!-- 现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量，即其内容可以是动态的。 我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。 --> <todo-item v-for="item in groceryList" <!--遍历groceryList数组，将数组里面的每一项存入每一个item中--> v-bind:todo="item"<!--数据绑定，todo属性的每一项内容与item绑定，说直白点，todo属性为数组中每一项的内容--> v-bind:key="item.id"><!--数据绑定，key的每一个值为数组中每一项的id值--> </todo-item> </ol></div>

Vue.component('todo-item', { props: ['todo'],< b9bc /div> template: '<li>{{ todo.text }}</li>'})var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '随便其他什么人吃的东西' } ] }})

格式：v-bind

 指令将 todo 传到每一个重复的组件中
<!--html部分，调用组件-->

<div id='id'>

    <ol>

        <todo-item  

             v-for="item in arr"

             v-bind：todo="item">

       </todo-item>

    </ol>

</div>

//JS部分，注册组件

var app = new Vue({

    el:'id',//应用该组件的容器的ID

    data:{//组件中存放的数据一律存放在data中

        arr:[//数组中每一项存放的数据，arr为数组名字

      {属性:值},

      {属性：值},

      {属性：值}//数组中最后一项的末尾不加逗号     

      ]

   }

})

//注册组件之后，使组件接收属性

Vue.component('todo-item',{

    props:['todo'],

   template:'<li>{{todo.属性名}}</li>'//最后每一项会显示属性名对应的属性值

})