Vue.js 是什么
一个用于构建用户界面的渐进式框架
插值模板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
除了文本插值，还有 绑定 attribute
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
</body>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
</html>
条件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
</body>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
</html>
循环
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">{{ todo.text}}</li>
</ol>
</div>
</body>
<script>
var app4 = new Vue({
el: "#app-4",
data: {
todos: [
{ text: "学习 JavaScript" },
{ text: "学习 Vue" },
{ text: "整个牛项目" },
],
},
});
</script>
</html>
事件监听
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
</body>
<script>
var app5 = new Vue({
el: "#app-5",
data: {
message: "Hello Vue.js!",
},
methods: {
reverseMessage: function () {
this.message = this.message.split("").reverse().join("");
},
},
});
</script>
</html>
v-model 双向绑定
- 以前（单向）： 只有代码里的变量变了
页面才会变。
- v-model（双向）： 页面上的输入框变了
变量也会跟着变。
上面这些都是通过改变变量，来影响页面的展示，使用v-model通过"改变页面"，反过来影响变量的值
- 正向（Data
View）： 变量变了，输入框里的字会自动变（这是基础）。
- 反向（View
Data）： 输入框里打字，变量的值自动更新（这是你通过 v-model 获得的“超能力”）。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message" />
</div>
</body>
<script>
var app6 = new Vue({
el: "#app-6",
data: {
message: "Hello Vue!",
},
});
</script>
</html>
自定义组件
通过定义组件和 props 让页面由组件构成（通过组件组织起一个页面）
为了让组件支持内容，通过定义props 实现，让父组件通过props 把内容传递到子组件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
>
</todo-item>
</ol>
</div>
</body>
<script>
Vue.component("todo-item", {
props: ["todo"],
template: "<li>{{todo.text}}</li>",
});
var app7 = new Vue({
el: "#app-7",
data: {
groceryList: [
{ id: 0, text: "蔬菜" },
{ id: 1, text: "奶酪" },
{ id: 2, text: "随便其它什么人吃的东西" },
],
},
});
</script>
</html>
