5.el与data的两种写法

风落不归处

已于 2022-07-13 17:49:01 修改

阅读量254

点赞数

分类专栏： web前端学习文章标签： vue.js javascript 前端

于 2022-07-13 17:47:19 首次发布

本文链接：https://blog.csdn.net/weixin_43893483/article/details/125769017

版权

web前端学习专栏收录该内容

31 篇文章 2 订阅

订阅专栏

1.data与el的2种写法

（1）el有2种写法

<1> new Vue的时候配置el属性

<2> 先创建Vue实例，然后再通过vm.$mount("#root")指定el的值

（2）data有2种写法

<1> 对象式（不使用脚手架时均可用，使用脚手架时，在vue2中可用于vm上，不

                        能用于vc上，在vue3中，vm和vc均不可用）

<2> 函数式（任何场景均可用）

        注意：如何选择data，不使用vue-cli时，哪种写法都可，使用vue-cli时，尽量使用

函数式，否则在vm中会报错。

（3）一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是

                vue实例了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>el与data的两种写法</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>你好，{{name}}</h1>
		</div>
	</body>

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

		//el的两种写法
		/* const v = new Vue({
			//el:'#root', //第一种写法
			data:{
				name:'尚硅谷'
			}
		})
		v.$mount('#root') //第二种写法 */

		//data的两种写法
		new Vue({
			el:'#root',
			//data的第一种写法：对象式
			/* data:{
				name:'尚硅谷'
			} */

			//data的第二种写法：函数式
			data(){
				console.log('@@@',this) //此处的this是Vue实例对象
				return{
					name:'尚硅谷'
				}
			}
		})
	</script>
</html>