一、条件与循环
1.1 条件语句
1.1.1 v-if、v-else、v-else-if
<h2>v-if</h2> <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1> <h2>template</h2> <h2>v-else</h2> <div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div> <h2>v-else-if</h2> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> <script type="text/javascript" src="js/vue2.6.js"></script> <script type="text/javascript"> new Vue({ el:'#app', data:{ awesome:true, ok:true, type:'A' } }) </script>
1.1.2 v-show
1.2 模板语法
1.2.1 template v-if
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> <script type="text/javascript"> new Vue({ el:'#app', data:{ ok:true } }) </script>
1.2.1 Key管理可复用的元素
key:key的name相同时表示是为同一属性赋值，切换时保留值；不同则切换时不保留。
<h2> key 管理可复用的元素</h2> <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template> <script type="text/javascript"> new Vue({ el:'#app', data:{ loginType:'username' }, methods:{ toggle(){ this.loginType =this.loginType=='username'?'email':'username'; } } }); </script>
运行效果
key不同时：
key相同时即key=“username-input”
2.循环语句
2.1 v-for
<h2>v-for</h2> <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <script type="text/javascript"> new Vue({ el:'#app', data:{ awesome:true, ok:true, type:'A', todos:[ { text:'学习javascript' }, { text:'学习vue' }, { text:'学习c++' } ] } }) </script>
二、处理用户输入
2.1 {{message}}
<h2>用户输入</h2> <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转消息</button> </div> <script type="text/javascript"> new Vue({ el:'#app-5', data:{ message:'hello vue.js!' }, methods:{ reverseMessage(){ this.message = this.message.split('').reverse().join(' '); }, } }); </script>
2.2 v-model
数据和dom 双向绑定
<h2>v-model</h2> <div> <p>{{ message }}</p> <input v-model="message" /> </div>
三、组件化应用构建
# 问题记录 ## 问题 1：new vue 是否全局只能有一个？ ## 问题 2：el语句的含义是？ ## 问题3：v-show和v-if使用区别？
v-show：经常需要显示Dom时，减少底层渲染。
v-if：非必须显示内容，显示次数较少时。
未完待续…
