1, demand:
Click the button, the data buttons click of a sliding scale not scratch 1.
2, implementation code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--第一步：引入vue.js文件-->
<script src="js/vue.js"></script>
</head>
<body>
<!--第二步：创建视图/界面(View)-->
<div id="app">
<!--需要更改的数据必须包含在{{变量名}}中，并绑定数据处理函数add-->
<button id="btn" @click="add">click me {{n}}</button>
</div>
<script>
//第三步：定义Vuejs对象和数据
var vm=new Vue({
//负责名为#app这个div中的所有数据处理
el:"#app",
//定义一个对象，集中保存所有页面上需要的变量和初始值
data:{n:0},
//Vue规定，所有处理函数都必须放在methods中
methods:{
add(){ //add:function(){ ... }
//vue要求，事件处理函数想修改data中的变量，必须加this.
this.n++;
}
}
})
</script>
</body>
</html>
3, the introduction of vue.js file:
<script src="js/vue.js"></script>
4. Create a view / interface (View):
<div id="app">
<button id="btn" @click="add">click me {{n}}</button>
</div>
5, and defines Vuejs data objects:
<script>
var vm=new Vue({
el:"#app",
data:{n:0},
methods:{
add(){ //add:function(){ ... }
this.n++;
}
}
})
</script>
5, interpolation syntax: Interpolation:
What is the interpolation syntax: use variables in the page {{where}} tag may change.
Scientific name: syntax interpolation: Interpolation.
When: whenever the contents of a position in a page, automatically may change according to the variable, it is used to {{}} placeholder variables.
Results:
All variables are marked with elements {} {}, were added to a virtual DOM tree.
When the change of variable according to the variable name in {}, it is determined whether the current element content affected. If affected, it is automatically updated content of the element.
How to:
{{}} In addition to the death of one variable can be written, but also the right to write any js expression that returns a value - use the same template string $ {...}
For example: {{{{}} arithmetic comparison operation {{}}}} {trinocular operation {} {} {function call to create the object / object access attribute element {{}}}} array access
can not put the program structure: if else while do while for
6, sample project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>用户名：{{username}}</div>
<div>价格：￥{{price.toFixed(2)}}</div>
<div>性别：{{usersex==1?"男":"女"}}</div>
<div>登陆时间：{{new Date(logintime).toLocaleString()}}</div>
<div>星期：{{week[day]}}</div>
</div>
<script>
(function () {
var vm = new Vue({
el: "#app",
data: {
username: "dingding",
price: 12.5,
usersex: 1,
logintime: 1567416095498,
week: ["日", "一", "二", "三", "四", "五", "六"],
day: 1
}
});
}())
</script>
</body>
</html>
