生活随笔
收集整理的這篇文章主要介紹了
Vue介绍-Vue简单应用-Vue基本用法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
什么是Vue？
1、Vue.js（讀音 /vju?/, 類似于 view） 是一套構建用戶界面的漸進式框架。
2、Vue 只關注視圖層， 采用自底向上增量開發的設計。
3、Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
Vue可以用來做什么？
Vue可以做從簡單到復雜的前端單頁應用，隨處可見的Web前端都可以用Vue來開發。
為什么使用Vue？
1、輕量級
2、js語法
3、入門及上手快
vue與Jquery比較?
1、jquery關注dom
2、vue關注數據，不關注dom
Vue.js 安裝
使用 <script> 標簽引入。
Vue的書寫格式
<div id="vue_det"> <h1>{{details()}}</h1> </div><script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { ………}, methods: { details: function() {……}}})</script>Vue的對象
1、el：Vue的作用域，即只有在這個作用域里面的dom受Vue控制
2、data：vue頁面的數據模型，該數據模型為一個javascript對象，且在運行過程中該對象的屬性不允許增加，因此頁面數據模型必須提前定義好
3、methods：事件處理方法對象
數據綁定
1、數據綁定最常見的形式就是使用 {{...}}（雙大括號）的文本插值
2、使用 v-html 指令用于輸出 html 代碼
示例： ?
<div id="app"> <div v-html="message"></div></div> <script>new Vue({ el: '#app', data: { message: '<h1>Vue</h1>'}})</script>3、HTML 屬性中的值應使用 v-bind 指令，參數在指令后以冒號指明。
示例
<div id="app"> <pre><a v-bind:href="url">百度</a></pre></div> <script>new Vue({ el: '#app', data: { url: 'http://www.baidu.com'}})</script>4、 v-model 指令來實現雙向數據綁定
5、 v-on 指令，它用于監聽 DOM 事件
過濾器（可以接受參數）
示例
<div id="app">{{ message | capitalize }} <div v-bind:id="rawId | formatId"></div></div> <script>new Vue({ el: '#app', data: { message: 'runoob'}, filters: { capitalize: function (value) { if (!value) return ''value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1)}}})</script>條件語句
1、v-if
2、v-else
3、v-else-if
4、v-show
注意：v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之后。
示例
<div id="app"> <h1 v-show="true">Hello!</h1> <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>new Vue({ el: '#app', data: { type: 'C'}})</script>v-if 和 v-show的區別
（1）手段：
v-if是動態的向DOM樹內添加或者刪除DOM元素；
v-show是通過設置DOM元素的display樣式屬性控制顯隱；
（2）編譯過程：
v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內部的事件監聽和子組件；
v-show只是簡單的基于css切換；
（3）編譯條件：
v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變為真時才開始局部編譯（編譯被緩存？編譯被緩存后，然后再切換的時候進行局部卸載);
v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素保留；
（4）性能消耗：
v-if有更高的切換消耗；
v-show有更高的初始渲染消耗；
（5）使用場景：
v-if適合運營條件不大可能改變；
v-show適合頻繁切換。
循環語句
循環使用 v-for 指令。
示例
<div id="app"> <ol> <li v-for="site in sites"> //固定寫法 參數 in 數組/對象…{{ site.name }} </li> </ol> <ul> <li v-for="(value, key) in sites">{{ key }} : {{ value }} </li> </ul> <ul> <li v-for="(value, key, index) in sites">{{ index }}. {{ key }} : {{ value }} </li> </ul></div> <script>new Vue({ el: '#app', data: { sites: [{ name: 'Runoob' },{ name: 'Google' },{ name: 'Taobao' }]}})</script>樣式綁定
一、Class屬性綁定
1、行內對象綁定
<style>.active { width: 100px; height: 100px; background: green;}</style> <div id="app"> <div v-bind:class="{ active: isActive }"></div></div> <script>new Vue({ el: '#app', data: { isActive: true}})</script>2、預定義對象綁定
<style>.active { width: 100px; height: 100px; background: green;}.text-danger { background: red;}</style> <div id="app"> <div v-bind:class="classObject"></div> //直接綁定對象</div> <script>new Vue({ el: '#app', data: { classObject: { active: true, 'text-danger': true}}})</script>3、數組綁定
<style>.active {width: 100px;height: 100px;background: green;}.text-danger {background: red;} <body><div id="app"> <div v-bind:class="[activeClass, errorClass]"></div></div> <script>new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'text-danger'}})</script>二、style屬性綁定
1、行內對象綁定
<div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">123</div></div> <script>new Vue({ el: '#app', data: { activeColor: 'green', fontSize: 30}})</script> 2、預定義對象綁定
<div id="app"> <div v-bind:style="styleObject">123</div></div> <script>new Vue({ el: '#app', data: { styleObject: { color: 'green', fontSize: '30px'}}})</script>3、數組綁定
<div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">123</div></div> <script>new Vue({ el: '#app', data: { baseStyles: { color: 'green', fontSize: '30px'}, overridingStyles: { 'font-weight': 'bold'}}})</script>Vue初始化方法
Mounted
在vue初始化完成后調用該方法,一般用于vue初始化完成后需要自動執行的代碼。
示例
new Vue({el: '#app',data: {totalMoney: 0,productList: []},filters: {},mounted: function() {//書寫需要自動執行的代碼} });v-model 指令在表單控件元素上創建雙向數據綁定
一、單選框和復選框
示例
<div id="app"> <p>單個復選框：</p> <input type="checkbox" id="checkbox" value="asd" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多個復選框：</p> <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"> <label for="runoob">Runoob</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>選擇的值為: {{ checkedNames }}</span></div> <script>new Vue({ el: '#app', data: { checked : 123, checkedNames: [1]}})</script>注意
1、checked的值根據勾選狀態的不同而改變，但不是true就是false
2、checkedNames是一個數組，里面元素包含的是你選中的的復選框的所有的value
二、下拉菜單
示例
<div id="app"> <select v-model="selected" name="fruit"> <option value="">選擇一個網站</option> <option value="www.runoob.com">Runoob</option> <option value="www.google.com">Google</option> </select> <div id="output">選擇的網站是: {{selected}} </div></div> <script>new Vue({ el: '#app', data: { selected: ''}})</script>注意
根據你選中的哪個option，然后你綁定的模板所對應的值就是你選中的那個option的value
Vue的組件
書寫格式
Vue.component('組件名',{props:['屬性名'],template:'模板內容'})
1、組件的簡單書寫格式
<div id="app"> <runoob></runoob> </div> <script>Vue.component('runoob', { template: '<h1>自定義組件!</h1>'})new Vue({ el: '#app'})</script>2、新建一個.js文件，將Vue的組件書寫在這個文件中，使用<script> 標簽引入
1）新建.js文件
Vue.component('my-clock',{ props:[ 'format' ], template:'<h3>{{d|formatdate(format)}}</h3>', filters:{ formatdate:function(d,frm){ var dt= d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate(); var tm=d.getHours()+':'+d.getMinutes()+':'+d.getSeconds(); if(frm=='date'){ return dt;}else if(frm=='time'){ return tm}else{ return dt+' '+tm}}}, data: function(){ return { d: new Date() }}, methods:{ updatetime: function (){ this.d=new Date()}}, mounted:function (){setInterval(this.updatetime,1000);}});2）引入.js文件，并使用自定義組件
<script src="js/vue_00.js"></script><div id="qwee"> <my-clock format="data"></my-clock></div> <script> new Vue({ el:"#qwee"})</script>
總結
以上是生活随笔為你收集整理的Vue介绍-Vue简单应用-Vue基本用法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
