共计 3139 个字符,预计需要花费 8 分钟才能阅读完成。
一、Vue 介绍
1、什么是 Vue
能够独立实现前后端分离式 web 我的项目的 JavaScript 框架
2、学习 Vue 的起因
三大支流框架之一:Angular React Vue
先进的前端设计模式:MVVM
能够齐全脱离服务器端,以前端培训代码复用的形式渲染整个页面:组件化开发
3、Vue 的特点
单页面 web 利用
数据驱动
数据的双向绑定
虚构 DOM
二、Vue 应用一
2.1 第一个 Vue 页面与事件
<div id=”app”>
<h1>{{msg}}</h1>
<h2 v-on:click="clickAction"> 这是一条内容 </h2>
<h2 v-on:mouseover="clickAction"> 这是一条内容 </h2>
</div>
<script src=”js/vue.js”></script>
<script>
new Vue({
el: '#app',
data:{msg: 'this is first vue!!'},
methods:{clickAction:function () {alert('123123')
}
}
})
</script>
2.2 Vue 操作款式与文本操作
<div id=”app”>
<p v-on:click="btnClick" v-bind:style="v_style"> 点击变换文字色彩 1 </p>
<p v-on:click="btnClick" v-bind:style="v_style"> 点击变换文字色彩 2 </p>
<p v-on:click="changeWord">{{msg1}}</p>
<p v-on:click="changeWord" v-once="msg1">{{msg1}}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
msg: 'this is first vue!!',
msg1:'点击变换文字色彩 3',
msg2: '其实是偷偷给你换了字!',
v_style:{color:'green'}
},
methods:{btnClick:function () {if (this.v_style.color == 'green'){this.v_style.color = 'red';}else{this.v_style.color = 'green';}
},
changeWord:function () {this.msg1 = this.msg2;}
},
});
</script>
2.3 Vue 事件指令
<div id=”app”>
<p v-on:click="eventAction1" v-bind:style="v_style">{{msg[0] }}</p>
<p @click="eventAction2">{{msg[1] }}</p>
<ul>
<li @click="liAction(100)"> 第一个 li</li>
<li @click="liAction(200)"> 第二个 li</li>
<li @click="liAction(300)"> 第三个 li</li>
</ul>
<!-- 鼠标事件的对象:间接写函数名,默认将鼠标事件对象传入 -->
<div @click="func1">function1</div>
<!-- 鼠标事件的对象,一旦增加(),就必须手动传参,$event 就代表鼠标事件对象 -->
<div @click="func2">function2</div>
</div>
<script>
new Vue({
el: '#app',
data:{msg: ['这是 msg 外面的第一个值', '这是 msg 外面的第二个值'],
v_style:{color:'green',}
},
methods:{eventAction1:function () {console.log('this is eventAction1');
},
eventAction2:function () {console.log('this is eventAction2');
},
liAction: function (num, msg) {console.log(num, msg)
},
func1: function (ev) {console.log(ev)
},
func2: function (ev, msg) {console.log(ev);
console.log(msg)
}
},
});
</script>
2.4 属性指令
<div id=”app”>
<!-- 属性指令:用 vue 绑定属性,将属性内容交给 vue 解决 -->
<!-- 语法:v-bind: 属性名 ="变量" (v-bind: 能够简写为 :) -->
<p class=""style="" v-bind:theFirst="F" :theSecond="S">1</p>
<!-- class 属性 -->
<p :class="c1" @click="action1">2</p>
<!-- 多类名 -->
<p :class="[c1,c2]">3</p>
<!-- 'br' 固定写死的数据,不再是变量 -->
<p :class="[c1,'br']">4</p>
<!-- style 属性 -->
<!-- 一个变量:该变量值为 {},{} 外部实现一个个属性的设置 -->
<p class="gDiv" :style="s1"> 这是测试 style 属性 </p>
<!-- 一个 {}:{} 内一个个属性有一个个变量独自管制 -->
<p class="gDiv" :style="{fontSize:fs, color: c}"> 这也是测试 style 属性 </p>
</div>
<script>
new Vue({
el: '#app',
data:{msg: ['这是 msg 外面的第一个值', '这是 msg 外面的第二个值'],
v_style:{color:'green',},
F: 'First',
S: 'Second',
c1: 'rDiv',
c2: 'br',
s1: {
// 'font-size': '20px'
fontSize: '20px',
color: 'pink'
},
fs: '15px',
c: 'orange'
},
methods:{action1:function () {if(this.c1 == 'rDiv'){this.c1 = 'gDiv';}else{this.c1 = 'rDiv';}
},
},
});
</script>
<div id=”app”>
<form action=””>
<p> <input type="text" v-model="val" name="user"> </p>
<p> <input type="text" v-model="val"> </p>
<!-- 单选框 v-model 绑定的变量是单选框中某一个 input 的 value -->
<p>
男: <input v-model="r_val" value="male" type="radio" name="sex">
女: <input v-model="r_val" value="female" type="radio" name="sex">
</p>
<!-- 复选框 v-model 绑定的变量是一个列表,列表存寄存 0 到任一个复选框的 value -->
<p>
男: <input v-model="c_val" value="m" type="checkbox" name="h">
女: <input v-model="c_val" value="f" type="checkbox" name="h">
哇塞: <input v-model="c_val" value="mf" type="checkbox" name="h">
</p>
<button type="submit"> 提交 </button>
</form>
</div>
new Vue 外面的 data 下:
val: ”,
r_val: ‘female’,
c_val: [‘m’,’mf’],
正文完