目录
el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
在实例挂载之后,元素可以用 vm.$el 访问。
只在用 new 创建实例时生效。
data Vue 实例的数据对象。
Vue 将会递归将 data 的 property 转换为 getter/setter,从而让 data 的 property 能够响应数据变化。
methods: vue实例的方法绑定
不能使用箭头函数
调用时使用this.func()
<template>
<div class="hello">
<div @click="pushFunc()">v-on语法糖</div>
<div @click="pushFunc()">v-on</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
},
methods: {
pushFunc () {
let arr = []
arr.push('nnn')
arr.push('mmm')
arr.push('nnn')
console.log(arr)
return arr
}
},
async created () {
console.log(this.pushFunc())
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
computed 计算属性
可定义一些函数
只要data里面的数据发生变化computed会同步改变
缓存:如果data内的数据不发生变化,则无论渲染计算属性多少次都不会再次调用函数
引用时不要加 () ,直接使用名称,当普通属性使用
计算属性分为两个方法:
方法1:get(){} 属性最终的显示值。简写的时候,写的就是该方法中的代码
方法2:set(){} 当外部改变设置的计算属性值时,将掉用该方法。
简写:
<template>
<div class="hello">
<div>{{arrString}}</div>
<div @click="setString()">点击运行set方法</div>
</div>
</template>
<script>
// import { userLogin, userLoginPost } from '../service/api/user'
export default {
name: 'HelloWorld',
data () {
return {
userObj: {
name: 'xuerengui',
age: 23,
unit: '岁'
}
}
},
methods: {
setString() {
this.arrString = '张忠谋' // 虽然设置了this.arrString,但是最终显示结果仍旧以计算属性中的get方法为准
}
},
computed: {
arrString () { // 简写
// return Array.from(this.userObj).join('')
return Object.values(this.userObj).join('')
}
// arrString: { // 全写
// get () {
// return Object.values(this.userObj).join('')
// }
// set () {
// console.log(21) // 当执行methods内的setString方法的时候,将打印21
// }
// }
},
async created () {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
filters 过滤器 用于对渲染到页面上的数据进行处理
语法:
<div>{{变量|func1(参数2,参数3,...)}}
filters: {
func1(变量,参数2,参数3,...) {
return 处理后的结果
}
}
注:传参过程中,如果只需要进行变量传递,则 | 后的方法内不进行传参;;;如果需要传一个新得参数,则在 | 后的方法中传入参数值,并在方法接参过程中视为第二个
<!-- -->
<template>
<div>
<ul>
<li v-for="(val, key) in obj" :key="key">{{val|numToFixed(2)}}-{{key}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'VueBase',
data () {
return {
obj: {
name: 'sadas',
name1: '',
name2: 12,
name3: 213.23,
name4: '213.234',
name6: undefined
}
}
},
filters: { // 在这里定义过滤器
numToFixed (val, num = 2) {
val = Number(val)
val = isNaN(val) ? 0 : val
return val.toFixed(num)
}
},
methods: {
},
// 生命周期 - 创建完成(访问当前this实例)
created () {
},
// 生命周期 - 挂载完成(访问DOM元素)
mounted () {
}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
watch 监听数据的变化操作
1、在watch内定义方法,方法名与要监听的属性名一致
方法名(新值,旧值)
2、可以监听计算属性 即computed中的
<!-- -->
<template>
<div>
<div>{{name}}</div> -->
<label for="name">watch监听属性值的变化:<input type="text" id="name" v-model="name" /></label>
<div>数据长度:{{length}}</div>
</div>
</template>
<script>
export default {
name: 'VueOne',
data () {
return {
name: '',
length: 0
}
},
watch: {
name () {
console.log(this.name)
this.length = this.name.length
}
},
methods: {
},
// 生命周期 - 创建完成(访问当前this实例)
created () {
},
// 生命周期 - 挂载完成(访问DOM元素)
mounted () {
}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>