Vue2.5入门-1

vue如何引用和使用,实例和挂在点的介绍
<!DOCTYPE html>
<html>
<head>
<title>vue 入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
// <h1>hellow {{msg}}</h1> //方式一的模板
</div> //挂载点
<script>
new Vue({ //一个vue实例
el: "#root" , //绑定挂载点
template: '<h1>hellow {{msg}}</h1>' //方式二的模板
data: {
msg: "hellow word"
}
})
</script>
</body>
</html>
挂载点,模板和实例
Vue实例中的数据,事件和方法

插值表达式与v-text和v-html

//插值表达式 {{mgs}}

//标签绑定内容 v-text和v-html
<body>
<div id="root">
{{msg}}
<h1 v-text="number"></h1>
<h1 v-html="number"></h1>
</div>
<script>
new Vue({
el: "#root" ,//和哪一个dom节点绑定
data: {
msg: "hellow word",
number: '<span>123</span>'
}
})
</script>
</body> //v-text 输出 <span>123</span> 会转义
//v-html 输出 123 不会转义

事件函数v-on ,注意v-on: = @

<h1 v-text="number" @click="handleClick"></h1>
<h1 v-html="number" v-on:click="()=>{alert(123)}"></h1> methods:{
// handleClick: function(){
// alert(321);
// }
handleClick: function(){
this.msg = "world";
}
}
Vue 中的属性绑定和双向数据绑定

属性绑定v-bind,注意v-bind: = :

<div id="root" v-bind:title="title">
{{content}}
</div>

双向数据绑定,v-model

<div id="root" v-bind:title="title">
<input v-model="content">
<div>{{content}}</div>
</div>
Vue中的计算属性和侦听器

计算属性,作用是将以前计算过的相同值做缓存,可以提高效率

侦听器,监测某一个数据或计算属性发生变化

<!DOCTYPE html>
<html>
<head>
<title>vue 入门</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
姓<input v-model="firstName"/>
名<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root" ,//和哪一个dom节点绑定
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {//计算属性
fullName: function(){
return this.firstName + this.lastName;
}
},
watch: { //侦听器
// firstName: function(){
// return this.count++;
// },
// lastName: function(){
// return this.count++;
// }
fullName: function(){
this.count++;
}
}
})
</script>
</body>
</html>
v-if,v-show,v-for指令

v-if和v-show的区别,v-if会将元素从dom节点删除,但v-show不会

v-for中v-bind:key

<div id="root">
<div v-show="isShow">hello word</div>
<button @click="isShow1">toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root" ,//和哪一个dom节点绑定
data: {
isShow: true,
list: [1,1,3]
},
methods: {
isShow1: function(){
this.isShow = !this.isShow;
}
}
})
</script>
上一篇:4.0-uC/OS-III目录结构


下一篇:MongoDB 数组操作