VUE:接管DOM操作,面向数据编程,当数据改变后,VUE会自动替换掉DOM里的内容
挂载点,模板和实例
'以下是html使用vue.js的例子'
1.在项目中导入vue.js文件
2.在html中,使用script语法引入vue.js文件
3.在html中创建vue,创建时可传入以下参数
4.VUE会结合模板和data,生成内容,放在挂载点中显示
el: 挂载点,绑定DOM结点,也叫模板,VUE只会处理挂载点下面的内容
data: 数据,可供外部使用,随便自定义里面的配置名称
template: 模板,可以在这里写挂载里的DOM内容
methods: 方法写在这里,若在此要更改data中的内容,只需要this.名字即可
computed: 计算属性,指的是一个属性通过其他属性计算而来
watch: 侦听器
计算属性和侦听器
'计算属性':
一个属性通过其他属性计算而来,在computed中,是通过data中别的属性计算来的
优点是性能高,如果依赖属性没有变,那么你使用fullName的时候,用的是上一次计算属性的缓存结果,只有当依赖属性发生改变时, fullName才会重新计算,页面上的fullName才会跟着改变
'侦听器':
写在watch中,侦听vue中数据或计算属性的变化,一旦发生变化,就执行watch中写的代码逻辑
模板指令
'VUE实例中的数据,事件和方法'
v-on绑定事件
v-on:click="buttonClick"
这个绑定事件是个click事件,当点击时执行buttonClick方法,此方法定义在vue实例的methods里面
v-on:可以写成@
'VUE中的属性绑定和双向数据绑定'
v-bind属性单项绑定:数据决定页面的显示,但页面无法决定数据里的内容
v-model双向绑定:数据决定页面的显示,页面也决定数据里的内容,一般使用input框
'v-if和v-show: 隐藏和显示'
v-if: false时将标签从DOM树中移除,true时在DOM树中增加
v-show: false时标签并未在DOM树中移除,只是为标签增加了display:none这个属性,所以隐藏了
所以,若频繁的隐藏与显示,建议使用v-show,性能更高
'循环'
<ul><li v-for="item of list">{{item}}</li></ul>
data(){
return{
list: [1,2,3]
}
}
我们要去循环list这个数据项,每次循环会把对应的循环项的内容放到item这个变量中,那么循环展示时,就可以把item输出来
循环第一次item为1
循环第二次item为2
循环第三次item为3
另一种写法:
<ul><li v-for="item of list">{{item.text}}</li></ul>
list: [
{text: '列表第一行'},
{text: '列表第二行'},
{text: '列表最后一行'}
]
备注❤️:item是自己定的名字,也可以叫too或者nn
v-for需要加名字为key的属性,可以提升每一项的渲染效率
key值要求:每一项数据的key值不能重复
在上面的例子中,我们就可以用item为key值
<ul><li v-for="item of list" :key="item">{{item.text}}</li></ul>
但如果list:[1,1,3]
那就不能用item作为key值了
可以写为
<ul><li v-for="(item, index) of list" :key="index">{{item.text}}</li></ul>
意思是我要循环list数据列表
每一项的内容会放到item里面去
每一项下标放到index里面去
那么key值就可以用index
外部组件
1.新建ButtonCounter.vue文件,写好内部实现,按钮本显示0,每点击一次则进行＋1
<template>
<button v-on:click="count++">You clicked {{count}} times.</button>
</template>
<script>
export default {
name: "ButtonCounter",
data() {
return {
count: 0
};
}
};
</script>
2.在test.vue的<script>中导入ButtonCounter.vue,并在vue实例中创建这个组件
<script>
import ButtonCounter from '../components/ButtonCounter';
//test类
export default {
name: 'test',
data(){
return{}
},
//--注册外部组件--
components: {ButtonCounter}
}
3.使用这个组件
<ButtonCounter></ButtonCounter>
上面部分代码,test.vue
<template>
<div id="test">
<!-- 模板指令v-on: 点击事件 -->
<div v-on:click="textClick">{{click}}</div>
<br />
<!-- 模板指令v-bind: 属性单项绑定 -->
<span v-bind:title="title">鼠标悬停几秒后看效果</span>
<br />
<!-- 模板指令v-model: 双向数据绑定 -->
姓:
<input v-model="firstName" />
名:
<input v-model="lastName" />
<!--计算属性-->
<div>{{fullName}}</div>
<!--侦查器-->
<div>{{count}}</div>
<!-- v-if指令: 控制一个属性是否显示 -->
<div v-if="show">隐藏和显示</div>
<button v-on:click="handleClick">toggle</button>
<!-- v-for指令: 列表 -->
<ul>
<li v-for="(item, index) of list" :key="index">{{item.text}}</li>
</ul>
<!-- 组件:创建一个 ButtonCounter 组件的实例 -->
<ButtonCounter></ButtonCounter>
</div>
</template>
<script>
import ButtonCounter from "../components/ButtonCounter";
//test类
export default {
name: "test",
//--默认?--
data() {
return {
click: "hello",
title: "提示的title",
firstName: "",
lastName: "",
count: 0,
show: true,
list: [
{ text: "列表第一行" },
{ text: "列表第二行" },
{ text: "列表最后一行" }
]
};
},
//--方法--
methods: {
textClick: function() {
this.click = "world";
},
handleClick: function() {
this.show = !this.show;
}
},
//--计算属性--
computed: {
fullName: function() {
return this.firstName + " " + this.lastName;
}
},
//--侦听器
watch: {
firstName: function() {
this.count++;
},
lastName: function() {
this.count++;
}
},
//--外部组件--
components: { ButtonCounter }
};
</script>
