1. 实例演示vue常用术语,达到背诵级
vue安装
cdn方式<script src="https://unpkg.com/vue@next"></script>
<!-- 静态页面 --><h1>Hello World</h1><h1 class="title"><!-- 插值 --><div>{{title}}</div><div>{{content}}</div></h1><!-- v-html,v-text: 内容填充 --><h1 class="content"><div v-html="title"></div><div v-text="content"></div></h1><h1 class="">{{title}}</h1><script>a = {data() {return {email:'zl@qq.com',title: '我是title占位符内容',content: '我是content占位符内容',};},};//mount(".title")挂载点//create vue实例app = Vue.createApp(a).mount(".title");console.log(app.content);app.content = '响应式内容'obj = {data:{email:'zl@qq.com'},get email(){return this.data.email}}console.log(obj.email);b = {data() {return {email:'zl@qq.com',title: '<p style="color:red">我是title占位符内容</p>',content: '我是content占位符内容',};},};app2 = Vue.createApp(b).mount(".content");</script>
2. 实例演示样式与事件绑定
<style>.active{color: royalblue;}</style><body><!-- 样式绑定 --><div class="app"><p style="color: red;">hello</p><p v-bind:style ='style'>hello</p><!-- v-bind => 省略 --><p :style ='style'>hello</p><p :style ='{color,background:bgcolor}'>hello</p><p class="active">hello</p><!-- v-bind:class --><p :class="act">hello</p></div><script>app = {data(){return{style:'color:green',color:'green',bgcolor:'yellow',act:'active'}}}Vue.createApp(app).mount('.app')</script>
原生<input type="text" oninput="document.querySelector('.res').textContent=this.value"/><div class="res"></div><div class="app"><!-- v-on: => @ --><!-- event => $event -->oninput<input type="text" v-on:input="value = $event.target.value"><br/>@oninput<input type="text" @input="value = $event.target.value"><p>{{value}}</p>v-model<input type="text" v-model='mvalue'><p>{{mvalue}}</p>lazy<input type="text" v-model.lazy='zvalue'><p>{{zvalue}}</p></div><script>app = {data(){return{value:'',mvalue:'',zvalue:''}}}Vue.createApp(app).mount('.app')</script>//分隔符-------------------------分隔符<!-- v-on: => @event => $event --><div class="app"><a href="http://www.baidu.com" @click="show($event)">显示网站内容</a><hr><p onclick="alert('father')"><a href="http://www.baidu.com" @click.prevent.stop="s($event)">显示网站内容</a></p><div class="url">{{url}}</div></div><script>app = {data(){return{url:''}},methods:{show(eve){eve.preventDefault()this.url = eve.target.href;},s(eve){this.url = eve.target.href;}}}Vue.createApp(app).mount('.app')</script>
3. 实例演示列表渲染,并理解:key
<body><div class="app"><p>{{citys}}</p><ul><li v-for='(item,index) of citys' :key='index'>{{index}}=>{{item}}</li><li v-for='(oitem,oindex) of obj' :key='oindex'>{{oindex}}=>{{oitem}}</li></ul></div></body><script>app = {data(){return{citys:["上海","北京","武汉","长沙"],obj:{username:'zolo',email:'zl@qq.com'}}}}Vue.createApp(app).mount('.app')</script>
