Vue入门
- Vue
- Vue基本语法
-
- v-bind
- v-if
- v-for
- Vue绑定事件
- Vue双向绑定
Vue
Vue是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（vue-router，vue-resource，vuex）或既有项目整合。
第一个Vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "Hello Vue"
}
});
</script>
</body>
</html>
Vue基本语法
v-bind
Vue中数据和DOM建立连接，所有东西都是响应式的。在控制台操作对象属性，界面可以实时更新。
<div id="app">
<span v-bind:title="message">
鼠标悬停
</span>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "Hello Vue"
}
});
</script>
控制台中修改message的值，绑定了title属性的html也进行了更新
v-if
vue模版中的if
<div id="app">
<h1 v-if="ok">yes</h1>
<h1 v-else>no</h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
ok: true
}
});
</script>
同理更改ok为false前端也是实时更新
v-else-if写法相同
v-for
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{message: "张三"},
{message: "法外狂徒"}
]
}
});
写法类似于python
还有一个常用的index属性
<div id="app">
<li v-for="(item,index) in items">
{{item.message}}--{{index}}
</li>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{message: "张三"},
{message: "法外狂徒"}
]
}
});
</script>
Vue绑定事件
v-on:事件=“方法”
事件有Vue的事件和前端页面本身的事件。这里click是vue的事件，可以绑定到Vue中的methods中的事件方法
<div id="app">
<button v-on:click="sayHi">click me</button>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "c7ay"
},
methods: {
sayHi: function(){
alert(this.message)
}
}
});
</script>
Vue双向绑定
什么是双向数据绑定
Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当
视图发生变化的时候，数据也会跟着同步变化。
值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数
据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项
的，这时就会和双向数据绑定有冲突。
vue中使用v-model指令在表单、和元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
<div id="app">
输入的文本:<input type="text" v-model="message">{{message}}
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
<div id="app">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>value:{{selected}}</span>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
selected: ""
}
});
</script>
专注，勤学，慎思。戒骄戒躁，谦虚谨慎