1. 基本语法

vue2的基本语法如下：

<html>
<head>
<title>testVUE</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
	<div id="app">
		模板语法：{{test_data1}}<br/>
		属性绑定：<input type="text" v-bind:value="test_data1" /><br/>
		双向绑定：<input type="text" v-model="test_data1" /><br/>
		事件绑定：<button v-on:click="testClick">测试</button>
	</div>
</body>
<script type="text/javascript">
	var testVue = new Vue({
		el:'#app',
		data:{
			test_data1:0
		},
		methods:{
			testClick:function(){
				this.test_data1+=1
			}
		}
	})

</script>
</html>

详解：

效果展示

初期化

点击测试按钮（模板语法：双大括号, v-bind，v-model都随着test_data1的值+1变更）

v-model双向绑定的值输入5（data值随双向绑定值变更，双大括号, v-bind随data变更）

v-bind属性绑定的值变更（data未发生变化，因此双大括号, v-model也未变更）

2. 模板语法（双大括号 {{值}}）

双大括号会在页面输出data的内容test_data1，页面显示会随test_data1值的变更而变更

3. 属性绑定**（v-bind:属性 *简写 :属性）**

v-bind绑定标签的属性，可以是value，hidden，disabled，style，class等。

页面内容随data值变更，data的值不随页面v-bind属性值变更

**4. 事件绑定（v-on:事件*简写 @事件**）

v-on绑定标签的事件，可以是click等。

5. 双向绑定（v-model）

可以在input，textarea，select上使用

v-model.lazy 不立刻同步数据，失去焦点时同步

v-model.trim 过滤数据首伟空格

页面内容随data值的变更而变更，data值也随页面内容变更而变更。

6. 条件渲染（v-if）

可以同v-else-if 和 v-else 同时使用，必须在v-if之后

测试代码

<template>
  <div class="hello">
    <div v-if="hasHtml">
			模板语法：{{test_data1}}<br/>
    </div>
    事件绑定：<button v-on:click="testClick()">测试</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data(){
    const test_data1=0
    const hasHtml=false
    return {
      test_data1,
      hasHtml
    }
  },
  methods:{
    testClick:function(){
      if (this.hasHtml) {
        this.hasHtml = false
      } else {
        this.hasHtml = true
      }
    }
  }
}
</script>

hasHtml=false，不显示（模板语法div），页面源码没有代码

点击测试hasHtml=true，显示（模板语法div），页面源码有代码

7. 条件渲染（v-show）

测试代码

<template>
  <div class="hello">
    <div v-show="hasHtml">
			模板语法：{{test_data1}}<br/>
    </div>
    事件绑定：<button v-on:click="testClick()">测试</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data(){
    const test_data1=0
    const hasHtml=false
    return {
      test_data1,
      hasHtml
    }
  },
  methods:{
    testClick:function(){
      if (this.hasHtml) {
        this.hasHtml = false
      } else {
        this.hasHtml = true
      }
    }
  }
}
</script>

hasHtml=false，不显示（模板语法div），页面源码有代码