Vue 常用属性三种模板 总结

Posted YuLong~W

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 常用属性三种模板 总结相关的知识，希望对你有一定的参考价值。

文章目录

常用属性

el

el有2种写法：

  • new Vue时候配置el属性
  • 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
const v = new Vue(
	el:'#root', //第一种写法
	data:
		name:'呜啦啦'
	
)

//v.$mount('#root') //第二种写法

data

data有2种写法：

  • 对象式
  • 函数式

注意：组件时，data必须使用函数式，否则会报错

new Vue(
	el:'#root',
	//data的第一种写法：对象式
	/* data:
		name:'呜啦啦'
	 */

	//data的第二种写法：函数式
	data()
		console.log(,this) //此处的this是Vue实例对象
		return
			name:'啦啦啦'
		
	
)

methods

通过methods属性定义方法，放置页面中的业务逻辑，js方法一般都放置在methods中

用methods实现姓名案例：

<body>
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br/><br/>
		名：<input type="text" v-model="lastName"> <br/><br/>
		全名：<span>fullName()</span>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue(
		el:'#root',
		data:
			firstName:'张',
			lastName:'三'
		,
		methods: 
			fullName()
				console.log('@---fullName')
				return this.firstName + '-' + this.lastName
			
		,
	)
</script>

computed

计算属性：指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用。

计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性

原理： 底层借助了Objcet.defineproperty方法提供的 getter 和 setter

每一个计算属性都包含一个getter(get) 和一个setter(set) ，大多数情况用计算属性的默认用法， 只是利用了getter 来读取。在需要时，也可以提供一个setter 函数， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，执行一些自定义的操作。

计算属性缓存：

计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值

特点： 是属性变化才执行getter函数，否则执行缓存默认的true指令打开缓存。

作用： 如果频繁使用计算属性，而计算属性方法中有大量的耗时操作(例如在getter中循环一个大的数组)，会带来一些性能问题。计算属性缓存可以用来解决该问题。

get函数：

  • 初次读取时会执行一次
  • 当依赖的数据发生改变时会被再次调用。

备注：

  1. 计算属性最终会出现在vm上，直接读取使用即可
  2. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

用computed实现姓名案例：

<body>
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br/><br/>
		名：<input type="text" v-model="lastName"> <br/><br/>
		全名：<span>fullName</span> <br/><br/>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue(
		el:'#root',
		data:
			firstName:'张',
			lastName:'三',
		,
		computed:
			//完整写法
			/* fullName:
				get()
					return this.firstName + '-' + this.lastName
				,
				set(value)
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				
			 */
			//简写
			fullName()
				return this.firstName + '-' + this.lastName
			
		
	)
</script>

优势： 与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

methods和computed之间的区别：

  • computed是在值发生改变的时候才会触发效果
  • methods只要刷新执行了就会触发

watch

监视属性：

  • 当被监视的属性变化时， 回调函数自动调用， 进行相关操作
  • 监视的属性必须存在，才能进行监视
  • 监视的两种写法：
    • (1)new Vue时传入watch配置
    • (2)通过vm.$watch监视

示例：

<body>
	<div id="root">
		<h2>今天天气很info</h2>
		<button @click="changeWeather">切换天气</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	
	const vm = new Vue(
		el:'#root',
		data:
			isHot:true,
		,
		computed:
			info()
				return this.isHot ? '炎热' : '凉爽'
			
		,
		methods: 
			changeWeather()
				this.isHot = !this.isHot
			
		,
		//第一种写法
		watch:
			isHot:
				immediate:true, //初始化时让handler调用一下
				//handler什么时候调用？当isHot发生改变时。
				handler(newValue,oldValue)
					console.log('isHot被修改了',newValue,oldValue)
				
			
			//简写
			/* isHot(newValue,oldValue)
				console.log('isHot被修改了',newValue,oldValue,this)
			 */
		 
	)
	//第二种写法
	vm.$watch('isHot',
		immediate:true, 
		handler(newValue,oldValue)
			console.log('isHot被修改了',newValue,oldValue)
		
	)

	//简写
	/* vm.$watch('isHot',(newValue,oldValue)=>
		console.log('isHot被修改了',newValue,oldValue,this)
	) */
</script>

深度监视：

  • Vue中的watch默认不监测对象内部值的改变（一层）
  • 配置deep:true可以监测对象内部值改变（多层）
<body>
	<div id="root">
		<h3>a的值是:numbers.a</h3>
		<button @click="numbers.a++">点我让a+1</button>
		<h3>b的值是:numbers.b</h3>
		<button @click="numbers.b++">点我让b+1</button>
		<button @click="numbers = a:666,b:888">彻底替换掉numbers</button>
		numbers.c.d.e
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	
	const vm = new Vue(
		el:'#root',
		data:
			isHot:true,
			numbers:
				a:1,
				b:1,
				c:
					d:
						e:100
					
				
			
		,
		watch:
			//监视多级结构中某个属性的变化
			/* 'numbers.a':
				handler()
					console.log('a被改变了')
				
			 */
			//监视多级结构中所有属性的变化
			numbers:
				deep:true,
				handler()
					console.log('numbers改变了')
				
			
		
	)
</script>

备注：

  • Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
  • 使用watch时根据数据的具体结构，决定是否采用深度监视

用watch属性实现姓名案例：

<body>
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br/><br/>
		名：<input type="text" v-model="lastName"> <br/><br/>
		全名：<span>fullName</span> <br/><br/>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	const vm = new Vue(
		el:'#root',
		data:
			firstName:'张',
			lastName:'三',
			fullName:'张-三'
		,
		watch:
			firstName(val)
				//在这里用到了定时器异步操作
				setTimeout(()=>
					console.log(this)
					this.fullName = val + '-' + this.lastName
				,1000);
			,
			lastName(val)
				this.fullName = this.firstName + '-' + val
			
		
	)
</script>

computed和watch之间的区别：

  • computed能完成的功能，watch都可以完成。
  • watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

  • 所有被Vue管理的函数，最好写成 普通函数，这样this的指向才是 vm 或 组件实例对象
  • 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成 箭头函数，这样this的指向才是 vm或 组件实例对象

除以上五种属性之外，还有template属性和render属性，均在下文用到。

Vue 三种模板

html模板

基于DOM的模板，模板都是可解析的有效的HTML插值

文本： 使用 语法，作用：替换实例上的属性值，当值改变时，插值内容处会自动更新

原生的html： 双大括号输出的是文本，不会解析html（想要解析html，可以使用指令v-html）

属性： 使用v-bind进行绑定，可以响应变化

<div id="wrap">
   <p>你的名字是list.name</p>
</div>
<script>
    var list = 
        name:"donna",
        age:20
   	
    var vm = new Vue(
        el:"#wrap",
        data:list
    );
</script>

字符串模板

先定义字符串模板，然后在vue 的选项对象里面利用template绑定。

区别：

  • 字符串模板的优先级会比html模板高，如果html和字符串模板中都有内容，会用字符串模板里的内容替换html模板。

注意：

  • 定义的字符串模板中根节点只能有一个
  • 字符串用 ` 引起来是可以换行的
<div id="app"></div>
<script>
    let data = 
        content: 'world',
    
    var str = `<div> 你好！content</div>`
    var vm = new Vue(
        el: '#app',
        data: data,
        template: str
    )
</script>

除了用变量定义模板字符串，还可以用script标签，给script 标签定义id，根节点只能有一个，将html结构写在一对script标签中，设置type="x-template"，模板将会替换挂载的元素。挂载元素的内容都将被忽略。Vue实例的template属性设置为给定的script标签

template属性：

<div id="wrap"> </div>
<script type="x-template" id="app">
    <div>
        <p>他的名字是list.name</p>
    </div>
</script>
<script>
    var list = 
        name: "张三",
        age: 20
    
    var vm = new Vue(
        el:"#wrap",
        data:list,
        template:"#app"
    );
</script>

render函数模板

语法格式：

render(createElement) 
	createElement(标签名,[数据对象],子元素)//子元素为数组或对象

数据对象的属性：

  • class: ：绑定class
  • style: ：绑定样式
  • attrs: ：添加行间属性
  • domProps: ：DOM元素属性
  • on: ：绑定事件
<style>
    .bgbackground:yellowgreen;
</style>

<div id="wrap">
    <p>你的名字是list.name</p>
</div>
<script>
    var list = 
        name:"donna",
        age:20
    
    var vm = new Vue(
        el:"#wrap",
        data:list,
        render(createElement)
            return createElement(
                "ul",
                
                    class:bg:true,
                    style:listStyle:"none",
                    attrs:
                        name:"donna"
                    
                ,
                [
                    createElement("li","aaaaaa"),
                    createElement("li","bbbbbb"),
                    createElement("li","cccccc")
                ]
            )
        
    );
</script>

class与style绑定

class样式：

  • 写法：class="xxx" ：xxx可以是字符串、对象、数组
  • 字符串写法 适用于：类名不确定，要动态获取
  • 对象写法 适用于：要绑定多个样式，个数不确定，名字也不确定
  • 数组写法 适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

style样式：

  • :style="fontSize: xxx"：其中xxx是动态值
  • :style="[a,b]"： 其中a、b是样式对象

以上是关于Vue 常用属性三种模板 总结的主要内容，如果未能解决你的问题，请参考以下文章

vue-常用指令&条件渲染&列表渲染

vue文本渲染的三种方法

vue模板，钩子函数

Vue 核心

Vue入门实战: 小白总结

Vue 核心