当前位置：网站首页>5.el与data的两种写法

5.el与data的两种写法

2022-07-19 05:05:00 【风落不归处】

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/[email protected]/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>

原网站

版权声明
本文为[风落不归处]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_43893483/article/details/125769017

边栏推荐

猜你喜欢

随机推荐