Vue基础笔记
一 、MVC与MVVM
1. MVC （单向操作）
- model 数据
- View 视图
- controllor 控制器
2. MVVM （双向数据绑定）
- model 数据
- View 视图
- viewModel 视图模型
二、 利用npm构建vue项目
npm init -y // 快速初始化
npm init // 手动设置
npm install vue // 安装
三、 Vue指令
1. v-model : 表单数据数据双向绑定（后面会有详细介绍）
2. v-html : 标签内容(html)
3. v-once : 只绑定一次，当数据再次改变，页面内容不会刷新
<div v-once>
{{msg}}
</div>
4. v-text : 标签内容
5. v-bind : 强制数据绑定
绑定图片地址
View
<img v-bind:src = "imgUrl">
<img :scr = "imgUrl"> // 简化写法
Data
let vm=new Vue({
el: "#app",
data: {
imgUrl: 'https://...logo.jpeg'
}
})
6. v-on : 绑定事件监听
View
<button v-on:click = "function(msg)"> test </button>
<button @click = "function(msg)"> test </button> // 简化写法 @+事件类型
vm
new Vue(
{
el: "#app",
data:
{
imgUrl: 'https://...logo.jpeg'
},
methods:
{
function(msg)
{ // 可传参，可不传
alert('事件绑定测试')
}
}
})
7. 计算属性和监视(难点)
- 计算属性 : computed 如果computed里面的属性函数被多次调用，只会执行一次，第一次的结果会被缓存
- 监视 ： watch
View
<div v-text = msg ></div>
<div v-text = new_msg></div>
<input type="text" v-model = "firstname"></input>
<input type="text" v-model = "lastname"></input>
<input type="text" v-model = "fullname1"></input>
<input type="text" v-model = "fullname2"></input>
vm
new Vue({
el: "#app",
data: {
msg: "Hello Vue"
},
// 计算属性
computed: {
new_msg(){
return this.msg + "computed"
// new_msg初始化，和当 msg一旦被改变，就会调用这个函数
}
},
// 监视
watch: {
msg: function(new_value){ // 监视对象：msg 一旦改变，执行回调
this.new_msg = new_value + "watch"
}
}
})
vm2
let vm=new Vue({
el:'#app',
data:{
msg:'Hello',
msg_watch : "123",
firstname : "Peate",
lastname : "Chen"
},
// 计算属性
computed: {
msg_computed(){
return this.msg + " computed";
},
// 单向操作 v-data 当 firstname , lastname 发生改变，返回新fullname1
fullname1(){
return this.firstname + " " +this.lastname
},
// 双向操作 v -data- v，当 firstname , lastname 发生改变，返回新fullname2
// 当 fullname2发生改变时，firstname , lastname 同时改变
fullname2: {
set(value){ // 监听 fullname2，如果发生改变，去设置 firstname , lastname 的值
const values = value.split(" ")
this.firstname = values[0]
this.lastname = values[1]
},
get(){ // 如果外部代码需要获取 fullname2 就会执行此函数
return this.firstname + " " + this.lastname
}
}
}
8. 强制绑定class和style
class强制绑定：(:class=xxx)
- xxx传入普通属性字符串 // 不能直接传 css 中的 class ,需要传入Data中声名的 class
- xxx传入对象形式字符串
- xxx传入字符串形式数组
style强制绑定：(:style="{color : color_Data , font_size : size_Data}")
- color_data 须在 data 中定义 : colorA : "red"
- color_data 可通过 methods 中的函数重新赋值
<p :class="a">绑定class(字符串)</p> // 普通字符串
<p :class="{aClass : isA , bClass : isB}">绑定class(对象形式)</p> // 此类名需与css中类名相同，无需在Data中声名
<button @click="updataStyle">改变颜色</button>
/
let vm=new Vue({
el:'#app',
data:{
msg:'Hello',
a : "aClass",
b : "bClass",
isA : true,
isB : false
},
methods: {
updataStyle(){
this.a="bClass"
this.isA=true
this.isB=false
}
}
}
9. v-if , v-else , v-show 条件渲染
- v-if ： 当 v-if = 真时，被设置的元素才会被添加到页面中，当其为 fales 时，会将这元素对象删除
- v-else : 默认为真
- v-show : 为真则显示，为假则隐藏，不会删除元素本身
<p v-if="c">显示</p>
<p v-show="d">show</p>
<button @click="updataStyle">改变颜色</button>
methods: {
updataStyle(){
this.c=!this.c
this.d=!this.d
}
}
10 . v-for 列表渲染
- 循环遍历数组
- 循环遍历对象
// 循环遍历对象
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}: {{p.age}}
<button @click = delete_p(index)>删除</button>
<button @click = updata_p(index)>更新</button>
</li>
</ul>
// 循环遍历对象
<ul>
<li v-for="(value,key) in persons[1]" :key="key">
{{value}} : {{key}}
</li>
</ul>
let vm = new Vue(){
el : "#app",
data : {
persons : [
{name : "chen" , age : 21},
{name : "ayoung" , age : 20},
{name : "peate" , age : 21}
],
new_li : {name : "tom" , age : 21}
},
methods : {
// 删除 li ( splice 方法)
delete_p(index){
this.persons.splice(index,1)
},
// 更新li ( splice 方法 替换)
updata_p(index){
this.persons.splice(index,1,this.new_li)
}
}
}
10 . 事件处理
- 绑定监听
单击事件 ： @click
按键事件 ： @keyup
@click = "function( 'abc' , $enent )" //事件回调函数默认传参 @event function(str,event){ alert(event.target.innerHTML + str) } - 事件修饰
- 停止事件冒泡 @click.stop
@click.stop = "function()" // 停止事件冒泡- 组织事件默认行为 @click.prevent
@click.prevent = "function()" // 阻止默认行为 - 按键修饰符
- 只有少数按键有
@keyup.enter = "function()" // 按键以 "enter" 键抬起时触发回调
11. 表单数据自动收集
收集的数据是各表单项的 value 值 ， 单/多选项分组是根据 v-model 的值
如果 v-model 的值中包含 value值 则会被选中
表单项中的 value 值如果和 v-model 在 Data 中的数据匹配上了则会被选中
<input type="checkbox" name="" id="selcet_1" value="唱" v-model="Hobbys">
<label for="selcet_1">唱</label>
<input type="checkbox" name="" id="selcet_2" value="跳" v-model="Hobbys">
<label for="selcet_2">跳</label>
<input type="checkbox" name="" id="selcet_3" value="Rap" v-model="Hobbys">
<label for="selcet_3">Rap</label>
<input type="checkbox" name="" id="selcet_4" value="篮球" v-model="Hobbys">
<label for="selcet_4">篮球</label>
<select v-model="CityId">
<option value="">请选择</option>
<option :value="City.id" v-for = "(City,i) in Citys" :key="i">{{City.city_name}}</option>
</select>
// 收集的数据是各表单项的 value 值 ， 单/多选项分组是根据 v-model 的值
// 如果 v-model 的值中包含 value值 则会被选中
// 表单项中的 value 值如果和 v-model 在 Data 中的数据匹配上了则会被选中
let vm=new Vue({
el:'#app',
data:{
sex : "man",
sex1 : "test",
Hobbys : ["Rap"],
Citys : [ {id : 1 , city_name: "武汉"},
{id : 2 , city_name: "桂林"},
{id : 3 , city_name: "昆明"}
],
CityId : 3
},
12. Vue 生命周期
// 由一个场景引入生命周期 :
/* 你的页面一加载就需要调用一个定时器，这时你需要把它定义在哪个周期呢 ?
/* 当你在 vm 中调用了定时器，如果这时需要你去销毁 vue ，之前调用的定时器不会跟随
着销毁，这时需要自己在 BeforeDestroy 周期时销毁定时器。
当你实例化一个 vue 后，会有以下阶段 :
-
初始化阶段
- beforeCreate() （监听数据 ，初始化事件）
- Created()
- beforeMount() (处理数据，为数据挂载到页面)
- mounted() (数据挂载完毕)
-
数据更新阶段
- beforeUpdate()
- updated()
-
VM销毁阶段
- beforeDestroy()
- destroyed()
let Vm=new Vue(){
el : "#app",
data : {
},
mounted(){
//数据挂载完毕后设置定时器
this.intervalid = setInterval(() =>{
this.isA = !this.isA
},1000)
},
}
13. Vue 动画
Vue 不是动画的生产者，而是 CSS 动画的搬运者，在运行过程中给元素添加动画效果的类
14. 过滤器
过滤器常用于格式化 String ,只能在两个地方用 ： {{ }} 和 v-bind 表达式中使用
过滤器分私有和全局 ，写法稍有不同
过滤器可以叠加调用
一个例子：
格式化获取的系统时间
HTML:
<p>{{ date | date_filter }}</p> //当解析到 date 时不会直接显示，先执行过滤，再显示
<p> {{ date | date_filter('HH:mm:ss') }} <p> //可传入格式参数
JS:
// 自定义全局过滤器
Vue.filter('date_filter' , (value , format)=>{ // 第二个参数为格式参数
return moment(value).format(format || 'YYYY/MM/DD HH:mm'); //传了参数则用format,也可用ES6参数默认值
})
let Vm = new Vue(){
el : '#app'
data : {
date : new Date(),
},
// 私有过滤器 （加s）
filters: {
date_filter: function(value , format){
return moment(value).format(format || 'YYYY/MM/DD HH:mm');
}
}
}
14 . ref 指令指定标签唯一标识
- 可通过此指令获取元素内容
<p ref = 'refName'>内容<p>
// 获取 p 标签内容
alert(this.$refs.refName.innerHTML)
四、自定义指令
- 全局指令
- 输入型参数一: 指令名
- 输出型参数二: 元素对象
- 输出型参数三: 包含指令信息的对象
<p v-my-command = "msg"><p>
Vue.directive('my-command', function(el , binding){
// 对所在元素的相关操作
el.innerHTML = binding.value.toUpperCase() // 转换为大写，value 就是 msg
})
- 局部指令
let Vm = new Vue(){0
el : '#',
data :{
msg : 'My Command'
},
// 定义局部指令
directives : {
'my-command' : function(el , binding){
el.innerHTML = binding.value.toUpperCase()
}
}
}
