VUE基础知识
vue框架是一个轻量级，渐进式的前端框架。
目录
VUE概述
前言：vue框架是一个轻量级，渐进式的前端框架
特点：数据驱动mvvm组件化
好处：封装了DOM操作元素的API
设计模型mvvm
- m：model代表数据代表vue中data数据
- v：view视图层代表用户看到的页面展现的效果
- vm：view model：视图模型层，在内部进行计算，在页面进行展现
VUE的七大属性
el属性：用于指示vue编译器从什么地方开始解析vue的语法，可以说是一个占位符
data属性：用来组织view中抽离出来的属性，可以说将视图的数据抽象出来存放入data对象中
template属性：用来设置模板，替换页面元素，包括占位符
methods属性：放置页面中的业务逻辑，js方法一般都存放入methods
render属性：渲染对应函数创建的虚拟dom
computed属性：一个能将计算结果缓存起来的属性
watch属性：进行属性的监听
VUE的使用前提
引入vue.js文件：<script src="lib/vue.js"></script>
vue原则：无侵入html，除非自己愿意——除非自己在对应的块上设置id，将来对对应块上的dom专门做vue的初始化工作
vue的使用
- 导入vue.js文件
- 写好一段模块代码，定义好id属性
- 在创建一个vue对象并将该块的id属性挂载在vue对象中，然后就可以在此块中实现vue操作
语法：var vm=new Vue(com)
com对象属性
- el：挂载对应块的id选择器
- data：数据挂载对象，其写法也可以将data看作一个函数来返回一个对象进行书写
- methods：Vue中用到的方法集对象
- computed：Vue中的属性集对象
- components：Vue中的组件集对象
- router：路由对象
- watch：属性监听
methods中函数的写法save函数为例（见前面）
- save:function(参数名){方法体}
- save(参数名){方法体}
案例
<!-- 引入vue.js文件 -->
<script src="lib/vue.js"></script>
<body>
<!-- 写好一段模板代码 -->
<div id="box">
<!-- 双大括号嵌入vue代码 -->
{{10+20}}
{{myname}}
<button v-on:click="setData">点击修改</button>
</div>
<!-- 没挂载的块vue不生效 -->
<div>
{{20+30}}
</div>
</body>
<script>
//vue模板解析
var vm= new Vue({
//模块挂载
el:"#box",
//数据挂载
data:{
myname:"lili"
},
methods: {
setData:function(){
this.myname="cjc"
}
},
})
// data里面的数据都挂到vm里面了，可以用vm.属性名来访问
</script>注意：
- {{a}} 为插值表达式，是vue语法之一，其中a为一个表达式
- data里面的数据都挂到vm里面了，可以用vm.属性名来访问data里面的属性，当然，也可以通过this.属性名来访问
vue计算属性
背景：模版内的插值表达式十分便利，但是设计他的初衷是为了简单运算的。在模板中放入太多的逻辑会让模板过重并且难以维护
注意：对于任何包含响应式数据的复杂逻辑都应该使用计算属性
理解：计算属性的特点突出在属性两个字上，首先他是个属性，这个属性他会在特定的函数里面计算，简单来说，他就是一个能将计算结果缓存起来的属性（将行为转化为静态属性），仅此而已，可以想象为缓存
计算属性使用场景
computed：后面接一个对象，里面写属性集
<template>
<div class="hello">
<!-- 我要求实现msg的字符串的反转逻辑(内部的逻辑“太”复杂) -->
<h1>{{msg.split('').reverse().join('')}}</h1>
<!-- 用计算属性的方式解决 -->
<h1>{{newMsg}}</h1>
<!-- 通过方法调用的方式解决 -->
<h1>{{youngMsg()}}</h1>
<button @click="change">改变依赖值</button>
</div>
</template>
<script>
export default {
data(){
return{
msg:"helloworld"
}
},
methods:{
change(){
this.msg="hiworld"
},
youngMsg(){
return this.msg.split('').reverse().join('')
}
},
//计算属性用于解决模版内的复杂逻辑
computed:{
//计算属性的简写形式
newMsg:function(){
//方法内访问vue的属性等必须加this
return this.msg.split('').reverse().join('')
}
}
}
</script>注意
- computed和methods内部的方法名不能重名，重名之后会直接调用methods
- methods：定义方法，调用方法使用方法名（）形式，需要带括号
- computed：定义属性，调用属性使用属性值形式，不需要带括号
- 如果属性值的方法中依赖值发生变化，则属性会重新计算（计算属性的方法才会执行），否则不管使用这个属性多少次，他都不会重新计算，不像方法调用一样（调用一次计算一次）
计算属性的setter和getter
计算属性的完全体
<template>
<div class="hello">
<!-- 用计算属性的方式解决 -->
<h1>{{newMsg}}</h1>
<button @click="msg='hiworld'">改变依赖值</button>
<button @click="newMsg='newOne'">更改计算属性值</button>
</div>
</template>
<script>
export default {
data(){
return{
msg:"helloworld"
}
},
//计算属性用于解决模版内的复杂逻辑
computed:{
newMsg:{
//计算属性一般是没有set方法的，这就代表着计算属性是一个只读的属性
//在设置或更改计算属性时调用
set:function(newValue){
//这里面的newValue就是更改计算属性的新值
console.log(newValue);
},
//调用newMsg属性时会自动执行
get:function(){
return this.msg.split('').reverse().join('')
}
}
}
}
</script>watch监听器
<template>
<div class="hello">
<h1>{{msg}}</h1>
<button @click="msg='hiworld'">改变msg</button>
</div>
</template>
<script>
export default {
data(){
return{
msg:"helloworld"
}
},
//监听数据的变化
watch:{
//注意：watch里面不用this，因为其是用来监听属性的
//当msg属性改变时执行后面的方法
msg:function(newValue,oldValue){
console.log("msg值改变了，新值为："+newValue+"旧值为："+oldValue);
}
}
}
</script>vue指令
指令是带有v-前缀的特殊属性以代表他们是vue提供的特殊属性
v-html与v-text
案例
<body>
<div id="box">
<!-- 把代码片段放在里面她是不会直接渲染的 -->
{{mytext}}
<div v-html="mytext"></div>
<div v-text="mytext"></div>
</div>
</body>
<script>
new Vue({
el:"#box",
data(){
return {
mytext:"<b>加粗的</b>"
}
},
})
</script>
结论：
- v-html/v-text后面的属性会被当做一个变量
- v-html会解析这个变量内容，进而将他转变为特定格式
- v-text不会解析这个变量内容
- v-html/v-text块之间不能有内容，有内容则会被覆盖
v-show
作用：控制此块的展现与消失
v-show后面接一个表达式，如果表达式的值为true则展示此块内容，否则不展示
原理：css层面将此块的display设置为none
v-on
- v-on:事件名=“函数”
- @事件名=“函数”
作用：此事件触发时立刻执行后面的函数
案例
<body>
<div id="box">
<div v-show="flag">{{word}}</div>
<button @click="appear">点击显示</button>
<button v-on:click="disappear">点击消失</button>
</div>
</body>
<script>
new Vue({
el:"#box",
data() {
return {
word:"我是一段话",
flag:false
}
},
methods: {
appear(){
this.flag=true
},
disappear(){
this.flag=false
}
}
})
</script>v-if
作用：满足条件的块展示否则不展示
- v-if：后面接一个表达式，如果表达式的值为true则展示此块内容，否则不展示
- v-else-if：和v-if用法一致，如果v-if的表达式不满足条件就会直接走v-else-if
- v-else：如果v-else-if也不满足条件则会走v-else
注意：3者按照从上到下顺序执行，三者是一个整体，如果v-if和v-else-if都满足则会只显示v-if块
v-if和v-show的区别：v-if中如果不满足田间的块直接不存在，而v-show中不满足条件的块也存在只是不显示而已
v-model双向绑定
通过v-model指令实现双向绑定，修改一方的同时修改相同的另一方，达到数据的同时更新，输入框等表单控件用的比较多
v-model=“vue中的数据属性”
双向绑定修饰符
.lazy
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，你可以添加lazy修饰符，从而转变为在change事件（不会立刻同步，而是在失去焦点或回车的时候进行同步）之后进行同步
.trim
如果要自动过滤用户输入的首尾空格，可以给v-model添加trim修饰符（就是输入之后默认取消首尾空格）
案例
<body>
<div id="a">
<input type="text" v-model="person.age">
<input type="text" v-model.lazy="person.age">
<input type="text" v-model.trim="person.age">
{{person.age}}
<p v-if="person.age>18">中年人</p>
<p v-else-if="person.age==18">青年人</p>
<p v-else>小屁孩儿</p>
</div>
</body>
<script>
new Vue({
el:"#a",
data() {
return {
person:{
age:""
}
}
},
})
</script>v-bind
当属性的值是变量而不是字符串时就可以通过v-bind标识，vue会自动处理
语法
- v-bind：属性名=“属性值”
- ：属性名=“属性值”
作用：标识属性名所对应的属性值是一个变量
案例
<style>
.red{
color: red;
}
.blue{
color: blue;
}
</style>
<body>
<div id="box">
<!-- 下面的red和blue必须为字符串类型 -->
<div :class="current?'red':'blue'">我是一条狗狗</div>
<button @click="changeColor">换颜色</button>
</div>
</body>
<script>
new Vue({
el:"#box",
data() {
return {
color:"",
current:true
}
},
methods: {
changeColor(){
this.current=!this.current
}
},
})
</script>v-for
语法：v-for="(data,index) in datalist"
属性
- datalist：为挂载在vue的data里面数据集合
- data：为datalist里面的单个数据
- index：为数据所在的下标索引，从0开始，其可以省略不写，不是必写项
列表案例
<body>
<div id="box">
<ul>
<li v-for="(data,index) in datalist" :key="data.id|index">{{data}}</li>
</ul>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
new Vue({
el:"#box",
data() {
return {
datalist:[
{id:"1",title:"新闻"},
{id:"2",title:"小说"},
{id:"3",title:"动漫"},
]
}
},
})
</script>key属性的作用：判断当前id下的元素是否发生变化，如果发生变化则渲染该元素，若没有则不渲染，解决了数组中一个元素改变就渲染整个数组的问题。
下拉选单案例
<body>
<div id="box">
<div>{{count}}</div>
<!--v-model里绑定的是下面数据的value内的data.id-->
<select size="1" v-model="count">
<option v-for="(data,index) in datalist" :value="data.id">{{data.title}}</option>
</select>
</div>
</body>
<script src="..\..\vue\lib\vue.js"></script>
<script>
new Vue({
el:"#box",
data() {
return {
count:"0",
datalist:[
{id:"0",title:"新闻"},
{id:"1",title:"小说"},
{id:"2",title:"动漫"},
]
}
},
})
</script>理解：通过v-model绑定value的这种方式就可以在选中特定下拉选单时data.id值的同时变化，这样就可以确保在data值中多key情况下可以通过data.id来作为datalist数组的下标来确认另外其他key值的情况（其实这里的data.id就相当于index，value用index也可以）。
v-clock
语法：直接在未渲染完成的可能出现插值表达式等的地方加v-clock属性，然后通过属性选择器将v-clock的display属性设置为none
案例
<script src="./lib/vue.js"></script>
<style>
/* 解决一闪而过的插值表达式 */
[v-clock]{
display: none;
}
</style>
<body>
<div id="app" v-clock>
{{msg}}
</div>
</body>
<script>
new Vue({
el:"#app",
data() {
return {
msg:"hello world"
}
},
})
</script>理解：页面未渲染完成时会先显示出标签，进而出现闪烁问题，通过以上方法，可以使未渲染完成时先隐藏标签，渲染完成之后再显示，这样就解决了闪烁问题
vue的生命周期函数
含义：vue实例在某一个时间点会自动执行的这些函数。我们通常也称其为钩子
注意：
- 生命周期函数是vue针对用户提供的扩展的功能，如果编辑了生命周期函数，则vue对象会自动执行无需手动调用
- 生命周期钩子函数不可以写成箭头函数
- 在vue生命周期的不同时刻会执行不同的生命周期函数
- vue生命周期函数写的位置与methods属性同级别
生命周期函数种类
1.初始化阶段
- beforeCreate：对象创建前
- created：对象创建后
- beforeMount：对象挂载前
- mounted：对象挂载后
2.vue对象的修改
- beforeUpdate：对象修改前
- updated：对象修改后
3.对象的销毁
- beforeDestroy：对象销毁前
- destroyed：对象销毁后
代码展示
<body>
<div id="app">
<input type="text" v-model="msg"><!-- 更改 -->
<h1>{{msg}}</h1>
<button @click="disappear">点击销毁</button>
</div>
<script src="./lib/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
msg: 'hello vue!'
}
},
methods: {
disappear:function(){
eval("vm.$destroy()")/* 执行vue对象销毁命令 */
}
},
//vue生命周期的初始化阶段的钩子函数:
beforeCreate() {//还没new Vue时触发的
console.log('beforeCreate..');
},
created() {//刚new完Vue时触发的
console.log('created..');
},
//vue生命周期的服务阶段的钩子函数:(挂载,更新beforeUpdate/updated)
beforeMount() {//还没有解析插值表达式
console.log('beforeMount..');
console.log(this.$el);//获取el对应的dom节点的内容
},
mounted() {//刚解析插值表达式
console.log('mounted..');
console.log(this.$el);
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},
//vue生命周期的销毁阶段的钩子函数:(销毁)
//需要在浏览器的控制台输入vm.$destroy()才会执行销毁阶段
beforeDestroy() {
console.log('beforeDestroy..');
},
destroyed() {
console.log('destroyed..');
}
})
</script>
</body>测试：进行修改和删除操作，并注视控制台的改变
vue操作dom元素
在vue中ref可以以属性的形式添加给vue标签或组件
ref写在标签上
用vue对象.$refs.vuetext(ref的值，随意写)来获取添加了ref="vuetext"标签上对应的dom元素
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="all">
<div id="header" ref="vuetext"></div>
<button @click="change">点击</button>
</div>
</body>
<script>
new Vue({
el:"#all",
methods: {
change(){
this.$refs.vuetext.innerText="别点了"
}
},
})
</script>ref写在组件上
用vue对象.$refs.value/vue对象.$refs['value']来获取添加了ref="vuetext"标签上对应的组件
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="all">
<home ref="value"></home>
<button @click="change">点击</button>
</div>
</body>
<script>
Vue.component('home',{
template:"<div>{{num}}</div>",
data() {
return {
num:"hello"
}
},
})
new Vue({
el:"#all",
methods: {
change(){
this.$refs.value.num="hello world"
//this.$refs['value'].num="hello world"也可以
}
},
})
</script>
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)