【JS学习笔记】Vue.js入门第一天
程序员文章站
2022-05-18 07:54:25
...
1、需求：
单击按钮，按钮中的数据从零开始没点击一次递加1。
2、实现代码：
<!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、引入vue.js文件：
<script src="js/vue.js"></script>
4、创建视图/界面(View)：
<div id="app">
<button id="btn" @click="add">click me {{n}}</button>
</div>
5、定义Vuejs对象和数据：
<script>
var vm=new Vue({
el:"#app",
data:{n:0},
methods:{
add(){ //add:function(){ ... }
this.n++;
}
}
})
</script>
5、插值语法: Interpolation：
什么是插值语法: 在页面中使用{{变量}}标记哪里可能发生变化。
学名: 插值语法: Interpolation。
何时: 只要页面中一个位置的内容，可能根据变量的变化而自动变化时，就都用{{变量}}来占位。
结果:
所有标有{{变量}}的元素，都被加入虚拟DOM树中。
当变量变化时，根据{{}}中的变量名，判断当前元素内容是否受影响。如果受影响，则自动更新该元素的内容。
如何:
{{}}除了可以写死一个变量外，还可编写任意正确的有返回值的js表达式——用法同模板字符串中的${…}
比如: {{算术计算}} {{比较运算}} {{三目运算}} {{调用函数}} {{创建对象/访问对象的属性}} {{访问数组的元素}}
不能放程序结构: if else while do while for
6、示例项目：
<!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>
上一篇： 支持节假日及调休的工作日历实现
下一篇： php数组分页实现方法