vue学习笔记二：vue开发基础上
一、vue实例
1、 创建vue实例
<script>
var vm=new Vue({
//选项
})
</script>
通过对象（选项）定义多个属性
二、el唯一根标签
- tips：vs code中，对HTML页面结构初始化方法为：先输入！然后按tab键。
（这样就省事太多了）
操作步骤：
1.引入vue.js
2.定义一个div
3.实例化vue
4.将数据显示到界面上
//下面是代码
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>Documenttitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
{
{name}}
<p>
{
{name}}
p>
div>
<script>
var vm = new Vue({
el:'#app',//el选项 通过el将VM与div绑定，接收的是字符串
//通过el将vue实例与div进行绑定，绑定之后，vue就可以操作div及其子元素，并且数据也可以显示在div内部。
data:{
name:'vue实例绑定成功'//data数据
}
});
script>
body>
html>
3、data初始数据
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>Documenttitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<p>{
{name}}p>
div>
<script>
var vm=new Vue({
el:'#app',
data:{
name:"定义初始数据"
}
});
console.log(vm.$data.name)
console.log(vm.name)//同第一类写法，第一类更繁琐
script>
body>
html>
4、methods定义方法
在methods选项中定义showInfo()方法，实现页面内容的更新：
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>Documenttitle>
<script src="./js/vue.js">script>
head>
<body>
<div id="app">
<button @click="showInfo">请单击button>
<p>{
{msg}}p>
div>
<script>
var vm=new Vue({
el:'#app',
data:{
// msg:''
msg:'原始值'
},
methods:{
showInfo(){
//this.msg='单击触发事件'
this.msg='点击之后的内容'
}
}
})
script>
body>
html>
5、computed计算属性
★响应式属性
- 计算属性其实是一个方法，但用法类似属性；
- 应用场景：当数据随其他数据变化而变化时使用
<!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>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>总价格:{
{
totalPrice}}</p>
<p>单价:{
{
price}}</p>
<p>数量:{
{
num}}</p>
<div>
<button @click="num==0?0:num--">
减少数量
</button>
/**
**/
<button @click="logTotalPrice">
打印总价格
</button>
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
price:20,
num:0
},
computed:{
totalPrice(){
return this.price*this.num;
}//计算属性一般返回结果，num改变，totalprice随之改变
},methods:{
logTotalPrice(){
console.log('totalPrice的结果'+this.totalPrice);//计算属性，所以无（）
}
});
</script>
</body>
</html>
6、watch状态监听
用来监测vue实例中的数据变动。
7、filters过滤器
对数据进行格式化。
☆|：管道符号
使用过滤器：
①插值表达式使用:{ {data属性名 | 过滤器名称}}
②属性绑定使用：v-bind:id=‘data属性名|过滤器名称’
filters:{
toUppercase(value){
//方法
return value?value.toUpperCase():' ';
}
}
二、vue数据绑定
1、样式绑定
- 内联样式：v-bind将样式数据绑定给DOM元素
- 绑定样式：以类名定义元素样式
绑定样式是为了操作样式
2、内置指令
- v-model：主要实现数据双向绑定，通常用在表单元素上。
- v-text：在DOM元素内部插入文本内容。
- v-html：在DOM元素内部插入HTML标签内容。
- v-bind：属性单向数据绑定。
- v-on：事件监听指令，负责给DOM元素绑定事件，配合事件类型使用。
- v-for：实现列表渲染，常用来循环数组。
- v-if和v-show：控制元素显示或隐藏，属性为布尔值。
三、vue事件
1、事件监听
2、事件修饰符
.prevent：HTML标签具有自身特性，可以使用.prevent修饰符来阻止标签的默认行为。
.once:只触发一次事件处理函数。
四、vue的组件
1、组件
即自定义标签
调用：
Vue.component('参数1：组件名称',{
参数2：配置对象
data(){
}//定义组件可使用的数据
template//组件的模板，定义组件的界面
})
2、局部注册组件
components:{
//key：组件名，驼峰命名法
//value：组件的配置对象
}
3、template模板：
4、组件之间的数据传递：
props:规定组件可以通过哪些属性传递数据。
$emit：调用自定义的事件，然后传递数据。
5、组件切换
五、vue生命周期
1、钩子函数
2、实例创建
钩子函数beforeCreate和created
3、页面挂载
beforeMount和mounted：在实例创建后，如果挂载点el存在，就进行页面挂载。
4、数据更新
beforeUpdate和updated:vue实力挂载完成后，当数据发生变化时，会执行beforeUpdate和pudated钩子函数。
5、实例销毁
beforeDestroy和destroyed：生命周期函数最后阶段是实例的销毁，会执行beforeDestroy和destroyed钩子函数。
$refs：一个小细节，具体看这
