一、起步
<!-- 开发环境版本，包含了有帮助的命令行警告 --><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 --><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue"></script>
开始从下面的几个Vue的使用场景中熟悉Vue：
声明式渲染
<!DOCTYPE html><html><head>
<title>Vue</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>
<div id="app">
{{ message }} </div></body><script type="text/javascript">
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!'
}
});</script></html>看起来就像是简单的模板渲染，但其实Vue已经做了大量工作，这个时候的数据和DOM已经是“响应式”
的了。可以打开浏览器控制台修改app实例，如app.message = 'Hello World!'，然后你可以发现html页面也会随之变化。
条件与循环
使用Vue的指令
v-if来决定是否创建该元素。<div id="app"> <p v-if="seen">现在你能看到我</p></div>
var app = new Vue({ el: '#app', data: { seen: true } });使用
v-for指令来实现循环：<div id="app"> <ul> <li v-for="list in lists"> {{ list.text }} </li> </ul></div>var app = new Vue({ el: '#app', data: { lists:[ {text: '学习js'}, {text: '学习vue'}, {text: '学习...'} ] } });处理用户输入
使用
v-on指令为元素绑定指定事件：<div id="app"> <p> {{message}} </p> <button v-on:click="reverseMessage">翻转字符串</button></div>var app = new Vue({ el: '#app', data: { message: '双向绑定' }, methods: { reverseMessage: function(){ this.message = this.message.split('').reverse().join(''); } } });使用
v-model表单输入和应用状态之间的双向绑定：<div id="app"> <p> {{message}} </p> <input type="text" v-model="message"></div>var app = new Vue({ el: '#app', data: { message: '双向绑定' } });组件化应用的构建
具体请参考：组件化应用的构建
二、指令大全
Vue.js提供了一些指令来方便我们操作页面，而不用我们再去操作Dom，具体详情可移步官网：指令
v-text
更新元素的textContent。如果要更新部分的textContent，需要使用 {{ Mustache }} 插值。
v-html
更新元素的innerHtml。注意内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。
v-show
根据表达式的真假切换元素的display:none。
v-if
根据表达式的真假决定是否创建（渲染）元素。
注意：当和 v-for 一起使用时，v-for 的优先级比 v-if 更高。
v-else & v-else-if
结合v-if使用。
v-for
使用特定语法alias in expression，多次渲染元素或模块。
可使用的表达式：Array | Object | number | string
v-model
限制
表单控件：
input|texteara|selecte组件
修饰符
.lazy：取代input监听change事件。.number：将输入的字符串转化为数字。.trim：将输入的字符串过滤掉首位空格。
作用
在表单控件或组件上创建双向绑定。
v-cloak
无表达式，v-cloak指令保持到元素结束编译，与css规则如：[cloak]:{display: none;}一起使用，使元素在编译完成前保持“影藏”状态。这样做的目的是，元素编译结束后再显示出来，可以解决页面编译渲染时出现的闪烁情况。
v-pre
无表达式，使用v-pre可跳过元素及其子元素的编译过程，加快渲染速度。
v-once
无表达式，使用v-once指令后元素只会编译渲染一次。这样可以在某些场景下提升性能。
v-bind
作用
为元素动态地绑定一个或多个特性（attributes + properties）；或绑定一个组件的prop到表达式中。
缩写：
:修饰符
.prop：被用来绑定DOM的property。（与attribute是有区别的）.camel：(2.1.0+) 将 kebab-case 特性名转换为 camelCase。.sync： (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的v-on侦听器。
特殊
在绑定
class或style属性时支持数组或对象等特殊类型。
v-on
作用
为元素绑定事件监听。
缩写：
@期望
Function|Inline Statement|Object修饰符
.stop- 调用event.stopPropagation()。.prevent- 调用event.preventDefault()。.capture- 添加事件侦听器时使用 capture 模式。.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。.native- 监听组件根元素的原生事件。.once- 只触发一次回调。.left- (2.2.0) 只当点击鼠标左键时触发。.right- (2.2.0) 只当点击鼠标右键时触发。.middle- (2.2.0) 只当点击鼠标中键时触发。.passive- (2.3.0) 以{ passive: true }模式添加侦听器
三、练习
我们可以通过一些实际的例子来熟悉一下Vue指令的相关用法。
文字跑马灯
需求：让文字滚动起来。
分析：要让文字达到滚动效果，就是随时间变化将字符串的末尾字符移动到头部，或是反过来。总结起来就是每隔一段时间操作一次字符串。另外需要一个按钮来控制文字的滚动效果。
实现：
<div id="app"> <p>{{ message }} </p> <button @click="changeMessage"> {{ btn }} </button></div>var app = new Vue({ el: '#app', data: { message: '0123456789', btn: '开始', status: true, intervalId: undefined }, methods: { changeMessage: function(){ var THIS = this; THIS.status = !THIS.status; if(!THIS.intervalId){ THIS.intervalId = window.setInterval(function(){ THIS.message = THIS.message.toString();//防止纯数字报错 var len = THIS.message.length; THIS.message = THIS.message.charAt(len-1) + THIS.message.slice(0, len - 1); }, 1000); } if(THIS.status){ THIS.intervalId = clearInterval(THIS.intervalId); THIS.btn = '开始'; }else{ THIS.btn = '暂停'; } } } })利用表单双向绑定实现简单的计算器
<div id="app"> <input type="text" v-model="x" @input="calculate"> <select v-model="smybol" @change="calculate"> <option value="+" selected="true">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" v-model="y" @input="calculate"> <input type="button" value="=" @click="calculate"> <input type="text" v-model="value"></div>
var app = new Vue({ el: '#app', data: { x: 0, y: 0, value: 0, smybol: "+" }, methods: { calculate: function(){ var THIS = this; var x = window.parseFloat(THIS.x); var y = window.parseFloat(THIS.y); var S = x + THIS.smybol + y; THIS.value = window.parseFloat(eval(S)); } } })使用
v-bind动态修改元素class或styleclass
<!DOCTYPE html><html><head> <title>Vue1</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <style type="text/css"> .red{ color: #abc; } .italic{ font-style: italic; } .larg{ font-size: 30px; } </style></head><body> <div id="app"> <p>规则，就是用来打破的</p> <!--原生class写法--> <p class="red italic larg">规则，就是用来打破的</p> <!--v-bind场景一:使用数组--> <p :class="['red','italic','larg']">规则，就是用来打破的</p> <!--场景二：使用三元表达式--> <p :class="['red','italic',flag?'larg':'']">规则，就是用来打破的</p> <!--场景三：使用数组对象--> <p :class="['red','italic',{larg:flag}]">规则，就是用来打破的</p> <!--场景四：直接使用对象--> <p :class="{red:false, italic:true, larg:true}">规则，就是用来打破的</p> <!--动态绑定--> <p :class="app_class">规则，就是用来打破的</p> </div></body><script type="text/javascript"> var app = new Vue({ el: "#app", data: { flag: false, app_class: {red:true, italic:true, larg:true} } });</script></html>style
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Test</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body> <div id="app"> <!--原生写法--> <h1 style="color: #abc;font-size: 30px;font-style: italic;">Jinx的含义就是Jinx.</h1> <!--使用对象--> <h1 :style="{color:'#217352','font-style':'30px','font-style':'italic'}">Jinx的含义就是Jinx.</h1> <!--使用数组--> <h1 :style="[{color:'#FF9800','font-style':'30px'},{'font-style':'italic'}]">Jinx的含义就是Jinx.</h1> <!--动态绑定--> <h1 :style="[sty1, sty2]">Jinx的含义就是Jinx.</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { flag: false, sty1: {color:'#aa9800','font-style':'30px'}, sty2: {'font-style':'italic'} } }); </script></body></html>
作者：风之之
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
