直接上例子！！
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css" target="_blank" rel="external nofollow" ><!--引入css样式-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--引入vue模板-->
</head>
<body>
<!--此div为挂载点，可以直接通过template模板将html显示到此挂载点的标签中-->
<div id="app"><!--id与js中的vue对象el要一致-->
{{ message }} {{name}}<!--插值表达式，引用vue对象中定义的data-->
<h1>Events</h1>
<p v-html="websiteTag"></p><!--js中定义的是HTML标签-->
<input type="text" v-bind:value="name" v-bind:title="name"><!--v-bind,标签内部属性绑定js中的data-->
<a v-bind:href="website" target="_blank" rel="external nofollow" >web开发</a><!--data作为标签内部变量，同上-->
<p>{{greet('night')}}</p><!--引入含参方法-->
<a v-on:click.prevent="alert()" href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >百度</a><!--警告之后，阻止网页跳转-->
<button v-on:click="age++">长一岁</button><!--事件中的方法可以不加括号-->
<button v-on:click="age--">减一岁</button>
<button @dblclick="subtract(10)">双击减10岁</button><!--双击事件dblclick-->
年龄：{{age}}
<div id="canvas" v-on:mousemove="updateXY">{{x}},{{y}}-<!--鼠标移动事件-->
<!--<span v-on:mousemove="stopMoving">stop Moving</span>--><!--阻止鼠标事件-->
<span v-on:mousemove.stop="">Stop Moving</span><!--阻止-->
</div>
<!--双向数据绑定-->
<h1>双向数据绑定</h1>
<!--将input中获取到的值传入data的变量中，将input中加入ref标记，在方法中改写。-->
<h1>键盘 Events</h1>
<label>姓名：</label>
<input ref="name" type="text" @keyup.enter="logName"><span>{{name}}</span>
<label>年龄：</label>
<input type="text" v-model="age"><span>{{age}}</span><!--点击enter之后才调用logAge方法在console打印-->
</div>
<script src="index.js" charset="utf-8"></script><!--引入js-->
</body>
</html>
<!-- v-text：在dom中显示文本 v-html:会转义 -->
index.js:
var app = new Vue({
el: '#app',
// template:'<a href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >模板</a>',/*模板，也可以直接写到html中；html会将其放入挂载点中*/
data: {
message: 'Hello Vue!',
name: 'xiao',
age:20,
website: "http://www.baidu.com",
websiteTag: "<a href='https://www.tmall.com/'>TMall</a>",
x: 0,
y: 0
},
methods: {
greet: function (time) {
return 'Good ' + time + "! " + this.name;
},
subtract: function (inc) {
this.age -= inc;
},
updateXY: function (event) {
console.log(event);
this.x = event.offsetX;/*可以将鼠标移动事件中的XY偏移量赋值给vue对象的变量*/
this.y = event.offsetY;
},
stopMoving: function (event) {
event.stopPropagation();/*可以阻止事件冒泡到父元素*/
},
alert: function () {
alert("Don't Access!");
},
logName: function () {
// console.log("你正在输入姓名！");
this.name = this.$refs.name.value; // 实现了双向绑定
console.log(this.$refs.name.value);
},
logAge: function () {
// console.log("你正在输入年龄！");
this.age = this.$refs.age.value;
}
}
});
网页效果：
v-on：给dom指定事件(简写@)事件后可以加上.alt.enter就是按了这几个键事件才会生效
v-text:在标签内部，vue数据以文本形式传入
v-html:可以将vue对象中的数据以html的形式传入页面【可能受到XSS攻击，要在server中对用户提交的内容进行处理，一般可以用“<>”转义。前端安全】
v-bind:标签中属性和vue对象中某个属性绑定（简写：）
v-model:数据双向绑定或者给标签一个事件，一个ref参考的属性名，在methods中通过this.$refs.age.value传值给this.age
可以在method中定义方法，但是没有缓存。计算属性computed有一个缓存，计算效率更高。
也可以通过watch监听变量的变化执行操作，watch也有缓存，但是比computed麻烦一些，对于所有的相关变量都要监听。
<!--数据双向绑定的实例-->
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!–引入vue模板–>-->
<script src="./vue.js"></script><!--导入开发版本的vue.js-->
</head>
<body>
<div id="root">
<!--v-model实现双向绑定-->
<label>姓名：</label>
<input ref="name" type="text" v-model="name"><span>{{name}}</span>
<label>年龄：</label>
<input ref="age" type="text" v-model="age"><span>{{age}}</span>
{{full}}
</div>
<script>
new Vue({
el: "#root",
data: {
name: 'vv',
age: '12',
count:0
},
computed: {/*计算属性，可以将data中的变量进行计算*/
full: function () {
return this.name + ' ' + this.age;
}
},
watch: {/*侦听器，一旦监听的变量发生变化，就可以进行一些操作*/
full: function () {
this.count++;
}
}
})
<!--computed:vue中的计算属性，当它所使用的变量发生改变时，会经过计算后打印full值，否则按原来默认的输出-->
</script>
</body>
</html>
computed中的变量可以使用set和get方法，当value值改变引起full相关变量的改变时，页面显示的变量都会经过重新计算，将新的结果重新显示在页面中
computed: {/*计算属性，可以将data中的变量进行计算*/
full:{
get: function () {
return this.name + ' ' + this.age;
},
set:function (value) {
var arr = value.split(" "); /*将arr按照空格分开*/
this.name = arr[0];
this.age = arr[1];
console.log(value);
}
}
},
v-if v-show v-for的使用
v-if 可以和v-else成对使用，或者还有v-else-ifvue在渲染页面的时候，会尽可能复用页面中已经存在的dom。
vue学习（一）+ 基本语法【v-on、v-click、v-model、v-if、v-for等用法&数据的双向绑定&todoList小栗子】 vue学习（一）+ 基本语法【v-on、v-click、v-model、v-if、v-for等用法&数据的双向绑定&todoList小栗子】 当更改show值时，会更改标签，但是不会清空原来input框中的值。
我们可以通过在标签中定义一个key值，这样的话，input框的key值不同，就会被识别为不同的dom，所以就会达到为我们想要的效果。
vue学习（一）+ 基本语法【v-on、v-click、v-model、v-if、v-for等用法&数据的双向绑定&todoList小栗子】
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!--点击按钮隐藏或显示div-->
<!--v-if会将dom删除再重新创建-->
<!--v-show会将dom设置一个css属性隐藏 display:none-->
<div v-if="show">hello world</div>
<button @click="handleClick">toggle</button>
<!--v-for循环显示数组中元素-->
<!--:key可以提高效率 index为下标-->
<ul>
<!--<li v-for="item of list" :key="item">{{item}}</li>-->
<li v-for="(item,index) of list" :key="item">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true,
list: [1, 2, 3]
},
methods: {
handleClick: function () {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
v-for的多种使用方法
关于index的用法：现在的版本输出index前不需要‘$’。
<li v-for="(item,index) in items">
{{ index }}
</li>
todoList小栗子
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<script src="./vue.js"></script>
</head>
<body>
<!--todoList-->
<div id="root">
<div>
<input v-model="inputValue" type="text" @keyup.enter="handleSubmit"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function () {/*点击事件*/
this.list.push(this.inputValue);/*向list中添加数据*/
this.inputValue='';/*每次提交之后清空输入框中的内容*/
}
}
})
</script>
</body>
</html>