1, la demanda:
Haga clic en el botón, haga clic en los botones de datos de una escala móvil 1 no raye.
2, código de implementación:
<!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, la introducción de archivo vue.js:
<script src="js/vue.js"></script>
4. Crear una vista / interfaz (Ver):
<div id="app">
<button id="btn" @click="add">click me {{n}}</button>
</div>
5, y define Vuejs objetos de datos:
<script>
var vm=new Vue({
el:"#app",
data:{n:0},
methods:{
add(){ //add:function(){ ... }
this.n++;
}
}
})
</script>
5, la sintaxis de interpolación: Interpolación:
¿Cuál es la sintaxis de interpolación: las variables de uso en la página {{}} donde etiqueta puede cambiar.
Nombre científico: la interpolación sintaxis: La interpolación.
Cuando: siempre que el contenido de una posición en una página, automáticamente pueden cambiar de acuerdo a la variable, que se utiliza para {{}} variables de marcadores de posición.
Resultados:
Todas las variables están marcados con elementos {} {}, se añadieron a un árbol DOM virtual.
Cuando el cambio de variable de acuerdo con el nombre de la variable en {}, se determina si el contenido del elemento actual afectado. Si se ve afectado, se actualiza automáticamente el contenido del elemento.
Cómo:
{{}} Además de la muerte de una variable se puede escribir, sino también el derecho a escribir cualquier expresión js que devuelve un valor - utilizar la misma cadena de plantilla $ {...}
Por ejemplo: {{{{}} aritmética operación de comparación {{}}}} {{operación trinocular} {} {llamada de función para crear el elemento de objeto / objeto atributo de acceso {{}}}} acceso a matriz
no puede poner la estructura del programa: si otra cosa, mientras que hacer mientras que para
6, proyecto de ejemplo:
<!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>
