vue常用属性

最新推荐文章于 2024-08-03 00:42:30 发布

龍言玄间

最新推荐文章于 2024-08-03 00:42:30 发布

阅读量404

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/matthewchen123/article/details/113747913

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

常用属性

el
data
template
methods
render
computed
watch
props

el属性

指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。在项目开发里，表明我们要将当前vue组件生成的实例插入到页面的哪个元素中，el属性的值可以是css选择器的字符串，或者直接就是对应的元素对象。并且只能在使用new生成实例时才能配置el属性，而我们在组件中只是export一个配置对象，如果设置了el则会报错。

类型：string | Element

限制：只在用 new 创建实例时生效。

详细：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement
实例。在实例挂载之后，元素可以用 vm. $e l 访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 v m .$ mount() 手动开启编译。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		<span>对大家说{{hi}}</span>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/vue.min.js" >
	let vm =  new Vue({
		el:"app",
		data:{
			hi:hello everyone
		}
	})
</script>

或者采用这个写法

let vm =  new Vue{(
	el:"#app",
	template:"<div><span>对大家说{{hi}}</span></div>"
	data:{
		hi:hello
	}
}}

参考笔者render入门学习文章

data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中

类型: Object | Function
限制: 组件的定义只接受function。
详细:
Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个的key/value对)：浏览器API创建的原生对象，原型上的属性会被忽略。大概来说，data应该只能是数据-不推荐观察拥有状态行为的对象。

三种书写方式

<script>
	var app = new Vue（{
		el:"#app",
		data:{
			islogin:false
	}
}）
</script>

<script>
	var app = new Vue（{
		el:"#app",
		data: function(){
			return{
				islogin:fasle
			}
	}
}）

<script>
	var app = new Vue（{
		el:"#app",
		data(){
			return {
				islogin:false
			}
	}
}）

return的应用
大型项目里创建多个相同的组件时候，未用 return 创建新对象的 data 都将指向同一个地址，造成数据污染，通过函数写法return一个新对象，对象地址不同，数据之间相互独立，避免数据污染。

template属性

用来设置模板，会替换页面元素，包括占位符。
模板的3种写法

<div id = "app">
	<h1>{message}</h1>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:hello
        },
    })
</script>

<div id = "app">
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:hello2
        },
        template:`<h1 style="color:red">我是选项模板2</h1>
    })
</script>

 
<template id="demo3">
    <h1 style="color:red">我是选项模板3</h1>
</template>
<script>
    var vm=new Vue({
        el:"#app",
        //第3种模板 写在<template>标签里
     	template:'#demo3'
    })
</script>

methods属性

类型：
{ [key: string]: function }
注意：
不应该箭头函数定义method函数，理由是箭头函数绑定了父级作用域的上下文，this不会按照期望指定vue实例，this.a将是undefined放置页面中的业务逻辑，js方法一般都放置在methods中

基本语法

var vm = new Vue({
    methods:{
        // 在此时定义方法，方法之间使用逗号分隔
        方法名:function(){}
});

在methods方法里传入参数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
	<div id="app">
	<p>check button then change:{{me}}</p>
	<button @click="change">check me</button>
	</div>
	<script>
		var app = new Vue({
			el:"app",
			data(){
				return{
					message:"hi",
				}	
			},
			methods:{
				change(){
					this.me = "hello",
				}
			}
		});
	</script>
</body>
</html>

访问data里的数据用this

<script>
	new Vue({
		el:"#app",
		data(){
			return{
				number:100,
			}
		}，
		methods:{
			show:function(){
				console.log(this.number);
			}
		}
	})；
</script>

使用native修饰符给组件绑定vue构造器里原生事件
默认在别的组件里使用vue构造器里的方法是不管用的,怎么解决呢?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法_侠课岛(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
	<div id="app">
		{{a}}
		<p><button @click="add(2)">add</button></p>
		<p><btn @click.native="add(2)">add</btn></p>
	</div>
	<script>
		let btn={
			template:"<button>vue的构造器里的add</button>"
		}
	
		var app = new Vue({
			el:"app",
			data(){
				a:1
			},
			components:{
				"btn":btn
			},
			methods:{
				add(num){
					if(this.a!=" "){
						this.a+=num
					}else{
						this.a++	
					}
				}
			}
		});
	</script>
</body>
</html>

render属性\渲染函数

vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM。
当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h，vm中有一个方法_c,也是这个函数的别名。

<script>
	//模板
	var login = {
		template:'<h1>登入组件</h1>'	
	}
	//创建vue实例得到viewmodel
	var vm = new Vue({
		el:"#app",
		data:{},
		methods:{}//createElements是一个方法，调用该方法可以把指定的组件模块渲染为html结构
		render:funcction(createElments){
		//return的结果会替换页面el指定的容器
			return createElements(login)
		}
	});
</script>