Vue核心 el与data的两种写法

Vue核心 el与data的两种写法

1.5. el 与 data 的两种写法

el有2种写法

  1. 创建Vue实例对象的时候配置el属性
  2. 先创建Vue实例,随后再通过vm.**$mount(‘#root’)**指定el的值

data有2种写法

  1. 对象式:data: { }

  2. 函数式:data() { return { } }

    如何选择:目前哪种写法都可以,以后到组件时,data必须使用函数,否则会报错

一个重要的原则

Vue管理的函数,一定不要写箭头函数,否则 this 就不再是Vue实例了

DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法title>
    
    <script type="text/javascript" src="../js/vue.js">script>
head>
<body>
	
	
    
    <div id="root">
		<h1>你好,{{name}}h1>
    div>

    <script type="text/javascript">
        // 阻止vue在启动时生成生产提示
        Vue.config.productionTip = false
		
		// el的两种写法 
		// const v = new Vue({ 
		// 	// el:'#root', 	// 第一种写法
		// 	data: { 
		// 		name:'cess' 
		// 	} 
		// }) 
		// console.log(v) 
		// v.$mount('#root')  // 第二种写法
		
		// data的两种写法 
		new Vue({ 
			el: '#root', // data的第一种写法:对象式 
			// data:{  
			// 	name:'cess'
			// }
			
			// data的第二种写法:函数式
			data() { 
				console.log('@@@', this) // 此处的this是Vue实例对象 
				return { name: 'cess' } 
			}
		})
		
		
    script>
body>
html>

你可能感兴趣的:(vue,vue.js,javascript,前端)