优秀的编程知识分享平台

网站首页 > 技术文章 正文

JS，Vue2，data的写法对象式和函数式，el(element)的两种写法

nanyue 2024-10-17 11:20:09 技术文章 7 ℃

Vue说明

Vue2，data的两种写法

对象式和函数式，当使用组件时必须使用函数式，否则报错。

Vue2，el（element）的两种写法

1、new Vue()，已配置el属性。

2、创建Vue实例，再通过vm.$mount('#root')指定el的值。

重要的原则：

由Vue管理的函数（方法），使用普通函数（方法），如果使用箭头函数（方法），this不再是Vue的实例了。

代码案例

案例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
        <!-- 
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
        -->
	</head>
	<body>
        <div id="app">
            <h1>{{name}}</h1>
        </div>
        <script type="text/javascript" >
			// 阻止vue在启动时生成生产提示
			Vue.config.productionTip = false;
			// 创建Vue实例
			new Vue({
				el:'#app', 
				data:{ 
                    name: "小奋斗"
				},
			});
		</script>
	</body>
</html>

案例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
        <!-- 
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
        -->
	</head>
	<body>
        <div id="app">
            <h1>{{name}}</h1>
        </div>
        <script type="text/javascript" >
			// 阻止vue在启动时生成生产提示
			Vue.config.productionTip = false;
			// 创建Vue实例
			const vm = new Vue({
				data(){
					//this是Vue实例对象
					console.log('this', this) 
					return {
						name: "小奋斗"
					}
				},
			});
			vm.$mount("#app");
		</script>
	</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表