Vue安装

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

Vue语法

符号 作用
{{ id }} 用于直接在文本中插入js中变量值
v-html 用于输出 html 代码
v-if/v-else/v-else-if 条件判断
v-for 循环
v-bind 绑定属性
v-on 事件处理
v-model 实现表单双向数据绑定
v-show 模块的显示隐藏

简单地再稍微讲一下上面符号的用法，{{id}}用于直接的文本的插入，但是对于属性中双括号不能直接用双括号，所以得用v-bind，比如(已省略js包引入代码）

<html>
<style>
	.font{color:red}
</style>
<body>
	<div id="a" v-bind:class="font:active" v-bind:style="{color:style}"></div>
	//active可以不加,如果active为false，则不用这个属性；对于style属性一定要加括号
	<script>
		new Vue({
			el:"#a",
			data:{
				style:green,
				active:true
			}
		})
		//Vue的js文件里有三个属性，el,date和methods，el是调用这个对象里 的值需要加的id，data用于定义属性，methods是方法
	</script>
</body>
</html>

关于v-for的遍历这里也举个例子：

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>HelloVue</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <link rel="stylesheet" href="helloVue.css">
    </head>
    <body>
        <div id="a">
            <ul>
                <li v-for="site in sites">
                    {{site.name}}
                </li>
                <li v-for="value in object">
                    {{value}}
                </li>
                <li v-for="list in 5">
                    {{list}}
                </li>
            </ul>
        </div>
        <script>
        	var vm=new Vue({
		    el:'#a',
		    data:{
		        sites:[
		            {name:'name1'},
		            {name:'name2'},
		            {name:'name3'}
		        ],
		        object:{
		            name:'java',
		            action:'是面向对象的语言'
		        }
		 }       
		});
        </script>
    </body>
</html>