一倒庵。Vue.js 鏈接引入?
vue.js下載安裝地址 https://vuejs.org。
CDN鏈接建議手動更新的特定版本號，現(xiàn)在官網(wǎng)的最新CDN如下：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
二踢匣。實例化Vue對象（初始化Vue）
實例化vue.js 框架代碼結(jié)構(gòu)：
new vue（{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? new vue 里面是對象童社，括號里面一定要用大括號
? ? ? ? el：“ ”求厕，? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?el：“html根容器元素 ”， ? ? ?
? ? ? ? data：{
}扰楼，
}）呀癣；
注釋：el：element 需要獲取的元素，一定是html中的根容器元素弦赖。
data： 用于數(shù)據(jù)儲存项栏。
三。數(shù)據(jù)和方法
methods：{
}
注釋：methods： 用于儲存方法蹬竖。
結(jié)合上面拆分的Vue結(jié)構(gòu)代碼：
new vue（{
? ? ? ? el：“ ”沼沈，
? ? ? ? data：{
}，
methods：{
}
}）币厕；
四列另，綜上Vue基礎結(jié)構(gòu)框架和index.html結(jié)合實例：
Html 代碼
<div id="vue-app">? ? ? ? ? ? ? ? 注釋：vue-app是根容器
? ? ? ? <h1> {{ qwe('世界')}}</h1>
? ? ? ? <h2>{{name}}</h2>
? ? ? ? <a v-bind:href="wangzhan">Vue.js</a>
? ? ? ? <p v-html="wangzhi"></p>
? ? </div>
vue.js代碼
new Vue({
? ? el:"#vue-app",
? ? data:{
? ? ? ? name:"我的第一段 Vue.js",
? ? ? ? wangzhan:"https://vuejs.org",
? ? ? ? wangzhi:" <a
? ? },
? ? methods:{
? ? ? ? qwe:function(asd){
? ? ? ? ? ? return '你好' + asd + '!';
? ? ? ? }
? ? }
});
上面的代碼我們將在網(wǎng)頁上面看到如下效果：
五，屬性綁定旦装，事件页衙，鼠標點擊事件
v-bind：
v-html：?
?data-binding：? 給屬性綁定對應的值。
在JS方法里面我們?nèi)缦乱欢未a：
<div> id="vue-app"? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? new vue({
? ? <h1> Events</h1>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? el:"vue-app";
? ? <button v-on:click="age++">漲一歲</button>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?data:{
? ? <button v-on:click="age--">減一歲</button>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?age:"22"
? ? <p>My age is {{ age }}</p>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? },
? ? ? </div>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?methods:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?})
上面我們使用JS的方法可以實現(xiàn)? 當我們點擊“漲一歲”的時候? 年齡22會增加1 當我們點擊“減一歲”的時候。年齡22會減少1? ? ??
當我們使用Vue的方法如下實現(xiàn) ：
<div id="asd">
? ? ? ? <h1> Events </h1>
? ? ? ? <button v-on:click="add(1)">漲一歲</button>
? ? ? ? <button v-on:click="subtract(1)">減一歲</button>
? ? ? ? <button v-on:dblclick="add(10)">漲十歲</button>
? ? ? ? <button v-on:dblclick="subtract(10)">減十歲</button>
? ? ? ? <p> My age is {{age}}</p>
</div>
new Vue({
? ? el:"#asd",
? ? data:{
? ? ? ? age:"22"
? ? },
? ? methods:{
? ? ? add:function(inc){
? ? ? ? ? this.age+=inc;
? ? ? },
? ? ? subtract:function(dec){
? ? ? ? ? this.age-=dec;
? ? ? },
}
})
我們使用Vue的方法同樣可以得出和JS方法一樣的結(jié)果店乐，但是我們又加了?v-on:dblclick? 這個代碼 這個鼠標點擊事件鼠標將點擊兩次才會出現(xiàn)的效果艰躺，把我們的年齡變化綁定在了按鈕上面。
六眨八，事件修飾符腺兴，鍵盤事件及鍵值修飾符
.stop 停止事件
.prevent? 阻止默認事件
.capture? 捕獲事件
.self? ?自身事件
.once? ? 執(zhí)行一次事件
.passive 被動事件
.enter
.tab
.delete(捕獲“Delete”和“Backspace”鍵)
.esc
.space
.up
.down
.left
.right
下面兩個代碼一個使用的是事件修飾符，一個沒使用廉侧，但是兩個代碼的效果是一樣的：
一页响，<span v-on:mousemove="stopMoving">stop Moving</span>? ??stopMoving:function(event){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?event.stopPropagation();? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
二， <span v-on:mousemove.stop="">stop Moving</span>
七伏穆，雙向數(shù)據(jù)綁定
一定是三個方法 input / select / textarea （輸入 選擇 ）
<div id="vue-app">
? ? ? ? <h1> 鍵盤 Evevt</h1>
? ? ? ? <label>姓名:</label>
? ? ? ? <input ref="name" type="text" v-on:keyup="logName">
? ? ? ? <span>{{name}}</span>
? ? ? ? <label>年齡:</label>
? ? ? ? <input ref="age" type="text" v-on:keyup="logAge">
? ? ? ? <span>{{age}}</span>
? ? </div>
上面代碼我們?yōu)榱私壎?span 我們要用到 ref 這個代碼拘泞，為了讓我們在input輸入進去的代碼，在span中輸出枕扫，顯示出來陪腌，下面的vue就要用到?this.name = this.$refs.name.value;
new Vue({
? ? el:"#vue-app",
? ? data:{
? ? ? ? ? name:"",
? ? ? ? ? age:""
? ? },
? ? methods:{
? ? ? ? ? logName:function(){
? ? ? ? ? ? this.name = this.$refs.name.value;
? ? ? ? ? },
? ? ? ? ? logAge:function(){
? ? ? ? ? ? this.age = this.$refs.age.value;
? ? ? ? ? }
? ? },
})
這樣我們就將 input和span 綁定在一起，實現(xiàn)了在input輸入烟瞧，span輸出也可以看見
