Front-end framework
Vue.js2.5 2018-05-12
Vue's official website: https://cn.vuejs.org/
Basic grammar practice + Case + TodoList + Vue-cli build tools + TodoList
main idea
- Data driven: page views and data binding two-way binding, do not manipulate dom, view and change the data at the same time
- Components of: business function is a separate module detached
MVVM
- View: DOM, view
- ViewModel: view and way binding model
- Model: js native objects
Vue basic grammar
Creating Vue examples
Direct introduction of the <head> <script> After downloading
<head>
<meta charset="UTF-8">
<title>Vue 入门</title>
<script src="./vue.js"></script>
</head>
Reference CDN:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
Mount point, templates and examples
Mount Point: Refers to the Pages tab, mount Vue
Contents of mount points: Templates
Example: JavaScript in new Vue () instance object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 入门</title>
<script src="./vue.js"></script>
</head>
<body>
<!--挂载点、模板、实例之间的关系
div为挂载点,通过ID绑定
模板可以写到挂载点内部和实例中-->
<div id="root">{{msg}}
<!--挂载点内部的内容为模板-->
<p>这里是挂载点内部的模板{{temMsg}}</p>
</div>
<script>
// vue实例
new Vue({
//指定实例的挂载点,Vue去接管哪个元素内容,绑定DOM节点
el: "#root",
// 模板也可以写到实例中,但是这样挂载点中的内容就不会被显示
template:'<i>这里是实例中的模板{{temMsg}}</i>',
// 数据内容
data: {
msg: "hello world",
temMsg:"template"
}
});
</script>
</body>
</html>
Examples of data Vue
Data Object: data
Page reference data instances:
{{}}、v-text、v-html
<body>
<div id="root">
<!--{{}}为插值表达式语法
v-text:Vue中的指令,只能输出文本,会转义
v-html:Vue中的指令,可以输出标签,不会转义
-->
<ul>
<li>{{msg}}</li>
<li v-text="vText"></li>
<li v-html="vHtml"></li>
<li v-text="content"></li>
<li v-html="content"></li>
</ul>
</div>
<script>
// vue实例
new Vue({
el: "#root",
data: {
msg: "{{}}双括号插值表达式",
vText: "v-text是Vue指令",
vHtml:"v-html是Vue指令",
content:"<i>测试v-text和v-html之间的不同</i>"
}
});
</script>
</body>
Vue events and methods
Binding elements to the event v-on: can also be abbreviated as @
Function object: methods
Vue features: data-oriented programming, no need to operate the DOM, data change, page change
<body>
<div id="root">
<!--
v-on:Vue绑定事件,
改变挂载点中的内容不要操作DOM,应该修改实例中的数据
-->
<ul>
<li v-on:click="()=>{alert('绑定了点击事件 v-on:click')}">{{msg}}:箭头函数有问题</li>
<li v-on:click="handleClick">{{msg}}:引用实例中methods对象下的方法</li>
<li @click="changeData">{{changeMsg}}</li>
</ul>
</div>
<script>
// vue实例
new Vue({
el: "#root",
data: {
msg: "v-on:click 点击事件",
changeMsg: "点击改变内容"
},
methods: {
handleClick: function () {
alert("绑定了点击事件 v-on:click")
},
changeData: function () {
// this指向data 修改数据
this.changeMsg="内容被改变";
}
}
})
;
</script>
</body>
Binding Properties
Binding properties of v-bind: title = 'variable name' can be written: title = 'variable name' command template
variable names Vue attribute data is a data object
behind is a = js expression number, may = 'input Character + title '
<div id="root">
<ul>
<li title="title 的名字">鼠标移动过来显示</li>
<li v-bind:title="title">属性绑定</li>
<!-- =号后边为js表达式 title 是变量-->
<li :title="'这是一个'+ title">属性绑定</li>
</ul>
</div>
<script>
// vue实例
new Vue({
el: "#root",
data: {
title: "实例中的数据"
}
})
</script>
Two-way data binding
Way binding: the decision to display the data page, the page can not decide what data
Two-way binding: template directives v-model, data content pages and any change, another also changed
<div id="root">
<ul>
<li><input :value="content"/></li>
<li><input v-model="content"/></li>
<li>{{content}}</li>
</ul>
</div>
<script>
// vue实例
new Vue({
el: "#root",
data: {
content: "this is content!"
}
})
</script>
Calculated with the listener properties
Object attributes computed from other attributes calculated from,
Other uses dependency property does not change the cached value is not recalculated
watch: listener object; monitor data changes, the data is changed trigger
<div id="root">
<ul>
<li>姓:<input v-model="firstName"/></li>
<li>名:<input v-model="lastName"/></li>
<li>{{firstName}}{{lastName}}</li>
<li>fullName 属性计算:{{fullName}}</li>
<li>侦听姓名修改次数:{{count}}</li>
<li>侦听fullName数据变化:{{fullCount}}</li>
</ul>
</div>
<script>
// vue实例
new Vue({
el: "#root",
data: {
firstName: "",
lastName: "",
count: 0,
fullCount: 0
},
// 计算属性:由其它属性计算而来
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
},
// 侦听器:监听数据变化
watch: {
// 侦听数据属性
firstName: function () {
this.count++;
},
lastName: function () {
this.count++;
},
// 侦听计算属性
fullName: function () {
return this.fullCount++;
}
}
})
</script>
v-if、v-show、v-for指令
v-if: control the presence or absence of DOM, false delete DOM
v-show: DOM control display or not Hide label DOM
v-for: traversing the data, data display cycle, increase: key = 'item' to improve efficiency, but not the same as the key value
<div id="root">
<ul>
<li><p v-if="show">hello world</p></li>
<li><p v-show="show">hello world</p></li>
<li>
<button @click="handleClick">toggle</button>
</li>
</ul>
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
// vue实例
new Vue({
el: "#root",
data: {
show: true,
list: [1, 2, 3]
},
methods: {
handleClick: function () {
this.show = !this.show;
}
}
})
</script>
Reference rookie Inn "Vue.js Getting Started Guide": http://www.runoob.com/w3cnote/vue-js-quickstart.html