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

时间：2025-04-04 14:03:36

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必须使用函数式，否则会报错。

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

<!-- 准备好一个容器 -->
		<div >
			<h1>Hello，{{()}}，{{address}}</h1>
			
			<a v-bind:href="()" x="hello" @="showInfo1">点我去{{}}学习1</a>
            <!-- 阻止默认事件（常用） -->
			<a :href="" x="hello">点我去{{}}学习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>

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

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

<!-- 创建Vue实例 -->
			const vm = new Vue({
				el:'#root', //el的第一种写法，用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
				data:{ //data/的第一种写法，对象式中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
					name:'vue',
					address:'北京',
					school:{
					name:'尚硅谷',
					url:'',
				}
				},
				methods:{
				showInfo1(event){
                 alert('同学你好！')
				},
				showInfo2(event,number){
					(event,number)
					// ()
					// (this) //此处的this是vm
					alert('同学你好！！')
				},
				showMsg(msg) {
          // showMsg(msg)展示信息
          (msg);
        },
        demo() {
          for (let i = 0; i < 100000; i++) {
            ("#");
          }
          ("累坏了");
        },
			}
			})
			(vm)
			
			/*v.$mount('#root') //el的第二种写法 
			data(){//data的第二种写法：函数式
				('@@@',this) //此处的this是Vue实例对象
				return{
					name:'尚硅谷'
				}
			}*/
			</script>

相关文章