vue.js文档

vue.js的指令：

    1. v-bind :
           特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上
       应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
           如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 特性的 
       HTML 已经进行了更新。
        
        例如：
            <div id="myid">
                    <div v-bind:title="message">
			鼠标悬停几秒钟查看此处动态绑定的提示信息！
		</div>

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

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

            <script>
		var app=new Vue({
			el: '#myid',
			data:{message:'页面加载于 '+new Date().toLocaleString()}
		})
                    app.message="新消息";
	</script>


            由该例子：可以得出，v-bin:title  指令可以用在<div>、<span>、<p> 等标签都可以用。将鼠标置于该文字上，停留几秒中，
                              显示：“页面加载于 2018/12/05 下午4:24:25”；
                              再赋值： app.message="新消息";将鼠标置于该文字上，停留几秒中，
                              显示：“新消息”；

            


        2.v-if    条件与循环：作用：控制切换一个元素是否显示。
                    

            <div id="myid">
		<p v-if="seen">
			现在能看见我!
		</p>
	</div>

            <script>
		var app=new Vue({
			el: '#myid',
			data:{seen:true}
		})
		app.seen=false
	</script>


            v-if:将这个元素节点（<p>）的 if 特性和 Vue 实例的 seen 属性保持一致;  再赋值app.seen=false，p标签内容将不显示。这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。


        3

        3、v-for

一、Vue.js 教程：

    Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

    Vue 只关注视图层， 采用自底向上增量开发的设计。

    Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。

阅读本教程前，您需要了解的知识：

HTML
CSS
JavaScript

本教程主要介绍了 Vue2.x 版本的使用。

二、Vue.js 安装:

1、独立版本(方法一)：建议使用该方式：

        我们可以在 Vue.js 的官网上直接下载 vue.min.js， 并在html页面直接用 <script> 标签引入。
        缺点：不是最新的，不能实时更新版本。

2、使用 CDN 方法（方法二）

        以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

            Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

            unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

            cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

3、NPM 方法（方法三）

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。

npm 版本需要大于 3.0，如果低于此版本需要升级它：