初始Vue
一、基础语法
用vue首先下载vue，可到官网下载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--模板语法-->
<h2>{{ mag }}</h2>
<h2 style="color: red">{{ person }}</h2>
<h3>{{ person.name }}</h3>
<h3 style="color: blue">{{ mag2 }}</h3>
<h3>{{ 1+1 }}</h3>
<h4>{{ {'name':'alex'} }}</h4>
<h2>{{ 1>2? '真的': '假的' }}</h2>
<p>{{ totalScore }}</p>
<!--渲染标签要用到系统指令-->
<div>{{ text }}</div>
<div v-html="text"></div>
</div>
<!--1，引vue-->
<script src="vue.js"></script>
<script>
// 2实例化对象
new Vue({
//当前对象绑定的根元素
el: "#app",
// 数据属性
data: {
mag: "我是mag",
python: 88,
linux: 76,
person: {
name: "zwq"
},
mag2: "hello vue",
// 标签数据
text: '<h2>yuan</h2>'
},
计算属性,可以不用在body里做太多的逻辑
computed: {
totalScore: function () {
return this.python + this.linux;
}
}
})
</script>
</body>
</html>
二、指令系统
//常用
v-text 将数据解释为普通文本
v-html 可以输出真正的 HTML 标签也可以将数据解释为文本
v-if “真正”的条件渲染
v-show 基于 CSS 进行切换，display：none。
v-for //保存数组或者对象 格式
v-for = '(item,index) in menuList'
v-for = '(value,key) in object'
//item指的是数组中每项元素
v-bind 可以绑定标签中任何属性
简写：v-bind:src 等价于 :src
v-on 可以监听 js中所有事件
简写：v-on:click 等价于 @click
表单输入绑定 v-model 双向数据绑定
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-if与v-show的区别
v-if 是“真正”的条件渲染，在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
watch
- 可以监听多个值（只要数据修改，就触发重新计算）
- 页面一加载就计算
watch: {
python: function (value, oldvalue) {
console.log("有人在修改成绩");
console.log(value, oldvalue);
}
}
懒加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第一步：引入vue，Vue function-->
<script src="./statics/vue.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
color: red;
}
.box2 {
color: green;
}
</style>
</head>
<body>
<!--第二步：声明领地（Vue实例的作用范围）-->
<div id="app">
<table border="1">
<thead>
<tr>
<th>科目</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python</td>
<td><input name="python" type="text" v-model.number.lazy="python"></td>
</tr>
<tr>
<td>Linux</td>
<td><input name="python" type="text" v-model.number.lazy="linux"></td>
</tr>
<tr>
<td>Go</td>
<td>
<input name="python" type="text" v-model.number.lazy="go">
</td>
</tr>
<tr>
<td>总成绩</td>
<td>{{ totalScore }}</td>
</tr>
</tbody>
</table>
</div>
<script>
// 第三步：创建一个对象（Vue对象）
new Vue({
// 第四步：查找领地（作用域）
el: "#app",
data: {
python: 90,
linux: 87,
go: 78
},
computed: {
totalScore: function () {
return this.python + this.linux + this.go;
}
},
watch: {
python: function (value, oldvalue) {
console.log("有人在修改成绩");
console.log(value, oldvalue);
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号