vue模板语法和数据绑定以及data的两种使用方法_vue data里面用data的数据

Vue模板语法有2大类

1.插值语法 {{}}
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法 以v-开头
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。

Vue中有2种数据绑定的方式

1.单向绑定 v-bind
数据只能从data流向页面。
v-bind: 绑定事件 v-bind:href=“xxx” 或 简写为 :href=“xxx”
2.双向绑定 v-model
数据不仅能从data流向页面，还可以从页面流向data。
注：
（1）双向绑定一般都应用在表单类元素上（如：input、select等）
（2）v-model:value 简写为 v-model，因为v-model默认收集的就是value值

data的两种使用方法

(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，当学习组件时，data必须使用函数式，否则会报错。

总结：
xxx.toUpperCase()让data里的xxx内容大写
v-bind:href=“xxx” 简写为 :href=“xxx”
v-model:value 简写为 v-model
v-on:xxx 简写为 @xxx

<!-- 准备好一个容器 -->
		<div id="root">
			<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
			
			<a v-bind:href="school.url.toUpperCase()" x="hello" @click.prevent="showInfo1">点我去{{school.name}}学习1</a>
            <!-- 1.prevent阻止默认事件（常用） -->
			<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>		
				
			<!-- 简写 -->
			单向数据绑定：<input type="text" :value="name"><br/>
			双向数据绑定：<input type="text" v-model="name"><br/>

            <button v-on:click="showInfo1">点我提示信息</button>
			<button @click="showInfo1">点我提示信息1（不传参）</button>
			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>

           <!-- 2.stop阻止事件冒泡（常用） -->
           <div class="demo1" @click="showInfo1">
           <button @click.stop="showInfo1">点我提示信息</button>
           </div>
           <div><!-- 修饰符可以连续写 -->
           <a href="http://www.atguigu.com" @click.prevent.stop="showInfo1">点我提示信息   </a>
           </div>
           <!-- 3.once事件只触发一次（常用） -->
           <button @click.once="showInfo1">点我提示信息</button>
           <!-- 4.使用事件的捕获模式 -->
           <div class="box1" @click.capture="showMsg(1)">div1
           <div class="box2" @click="showMsg(2)">div2</div>
           </div>
           <!-- 5.只有event.target是当前操作的元素时才触发事件； -->
           <div class="demo1" @click.self="showInfo1">
           <button @click="showInfo1">点我提示信息</button>
           </div>
           <!-- 6.事件的默认行为立即执行，无需等待事件回调执行完毕；（移动端常用） -->
           <ul @wheel.passive="demo" class="list"><!-- wheel是鼠标轮滚动，scroll滚动条 -->
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           </ul>
		</div>

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

<!-- 创建Vue实例 -->
			const vm = new Vue({
				el:'#root', //el的第一种写法，用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
				data:{ //data/的第一种写法，对象式中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
					name:'vue',
					address:'北京',
					school:{
					name:'尚硅谷',
					url:'http://www.atguigu.com',
				}
				},
				methods:{
				showInfo1(event){
                 alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				},
				showMsg(msg) {
          // showMsg(msg)展示信息
          console.log(msg);
        },
        demo() {
          for (let i = 0; i < 100000; i++) {
            console.log("#");
          }
          console.log("累坏了");
        },
			}
			})
			console.log(vm)
			
			/*v.$mount('#root') //el的第二种写法 
			data(){//data的第二种写法：函数式
				console.log('@@@',this) //此处的this是Vue实例对象
				return{
					name:'尚硅谷'
				}
			}*/
			</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88