Vue - 常用选项总结

最新推荐文章于 2024-05-18 15:56:08 发布

LSYHhhhh

最新推荐文章于 2024-05-18 15:56:08 发布

阅读量1.4k

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_33961117/article/details/83505654

版权

一、创建Vue实例

二、el ：vue实例的挂载

三、data：含有零个或多个的 key/value 对，进行数据传递

三、methods：可以通过实例及表达式，进行调用的方法。

四、computed：进行方法内的计算（实现一个变量依赖多个变量）

1- 纯粹进行计算相关的操作

2- 实现一个变量依赖于多个变量

五、watch：监听变量，变量修改是触发方法（实现多个变量依赖于一个变量）

1- 调用修改变量值的多种方式

2- 实现多个变量依赖于一个变量（监听唯一的变量）

六、delimiters：改变插值表达式符号（{ {}}）

七、生命周期钩子：实例的各个时期调用的方法

查找详细API使用

一、创建Vue实例

步骤总结：

页面中引入vue文件

new一个新的Vue对象（可将对象进行赋值）

在new对象中添加相关选项内容
<body>
	<div id="app" class="app">
		<p title="test">title111</p>
		<p v-bind:title="title">v-bind</p>
	</div>
</body>


<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	
	// 创建vue实例
	new Vue({  
		// el: "#app"
		el: '.app',
		data: {
			title: "test2"
		}
	});
</script>

二、el ：vue实例的挂载

步骤总结：

在vue新对象内进行key：‘value’ 形式的挂载例如：el：‘.test’

value形式必须为CSS选择器语法例如：el:‘.test’ 、el:'#test'
（强烈建议使用id进行绑定，有且只有一个）
<body>
	<div id="app" class="app">
		<p title="test">test</p>
	</div>

	<div id="main">
	</div>
</body>


<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	// 创建vue实例
	new Vue({  
		// el: "#app"
		el: '.app',
	});

	// 将一个vue实例挂载到页面的一个页面结构
	new Vue({
		// 挂载点
		el: "#main",
	})

</script>

三、data：含有零个或多个的 key/value 对，进行数据传递

总结：

vue 对象内的 data：{} 形式创建data选项

data 内存在零个或多个 key：value 对；
key 以字符串形式存在，可适当省略合法变量名的引号；
value 可以为任意属性。

Html结构内，使用 插值表达式 { {}} (即，双大括号) 插入data内的数据，例如：{ { msg }}
注意：差值表达式内可以进行运算

JS结构内的到相应变量的方式：

直接获取vue实例对象，例如： console.log(app)

使用$，获取vue实例对象内的data对象，例如： console.log(app.$data)

获取data下的相应变量名，例如： console.log(app.$data.msg)

直接通过vue对象获取data下的变量，例如： console.log(app.msg)
<body>
	<div id="app">
		
		{
   { msg }}
		{
   { num }}
		
		{
   { 1 + 2 + 3 * 4 }}
	</div>
</body>

<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: "#app",
		// 为挂载点内部的vue变量提供值
		data: {
			msg: "hello world!",
			num: 88888
		}

	})
</script>

<script type="text/javascript">
	// 获取msg,num变量的值

	// 1.得到vue实例
	console.log(app);
	// 2.获取vue变量data: $data
	console.log(app.$data);
	// 3.获取目标变量值
	console.log(app.$data.msg);

	// 直接获取值
	console.log(app.msg);
	console.log(app.num);
</script>

三、methods：可以通过实例及表达式，进行调用的方法。

总结：

在vue对象内的创建 methods：{} ，存放方法

methods内方法以 方法名：function(参数){} 的形式存放。

methods内的方法，可以直接在JS结构体内进行调用，例如：vue对象名.方法名()

最低0.47元/天解锁文章

LSYHhhhh

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Vue - 常用选项总结

目录一、创建Vue实例二、el ：vue实例的挂载三、data：含有零个或多个的 key/value 对，进行数据传递三、methods：可以通过实例及表达式，进行调用的方法。四、computed：进行方法内的计算（实现一个变量依赖多个变量）1- 纯粹进行计算相关的操作2- 实现一个变量依赖于多个变量五、watch：监听变量，变量修改是触发方法（实现多个变量依赖于一...
复制链接

扫一扫