Vue的基本使用
一. Vue.js之细节分析
1.实例参数分析
-
el:元素的挂载位置（值可以是CSS选择器或者DOM元素）
-
data 模型数据（值是一个对象）
-
methods:{} 方法区： 里面放的函数
-
computed:{}计算属性区：,计算属性定义在computed里面
-
watch:{} 监听器： 数据变化时执行异步或者开销较大的操作，数据一旦发生变化就通知监听器所绑定的方法
-
mounted: function(){}钩子函数: 该生命周期钩子函数被触发的时候，模版已经可以使用，
一般此事用于获取后台数据，然后把数据填充到模版
-
components:{} 局部组件 ，放到components:{}中的组建只有本类中可以使用
2.插值表达式用法
-
将数据填充到HTML标签中
-
插值表达式指出基本的计算操作
-
语法： {{}}
<body>
<div id="app">
<!-- 插值表达式 ，页面显示data里面msg里的值Hello Vue-->
<!-- 插值表达式还支持下面的一些基本计算和数据拼接-->
<div>{{msg}}</div>
<div>{{1+2}}</div>
<div>{{msg+'----'+123}}</div>
</div>
<script src="js/vue.js"></script>
<script>
var vm= new Vue({
el:'#app',
data:{
msg:'Hello Vue'
}
})
</script>
</body>
3.数组相关API
3.1 变异方法（修改原有数据）
-
Push() 在数组尾部添加新元素。（尾部新增）
-
Pop() 取出数组尾部元素。(尾部取出)
-
Shift() 取出数组头部元素。(头部取出)
-
Unshift() 在数组头部添加新元素。(头部新增)
-
Splice() 向数组中添加，删除 元素，然后返回被删除的元素
-
Sort() 对数组的元素进行排序. 升序
-
Reverse() 对数组的元素进行排序. 降序
3.2 替换数组（生成新的数组）
-
Filter(). 通过检查指定数组中符合条件的所有元素
-
Concat() 连接两个或更多的数组，并返回结果
-
Slice() 从已有的数组中返回选定的元素
-
Some(). 用于检测数组中的元素是否满足指定条件，如果满足，返回true，剩下的不会执行
3.3 修改响应式数据
-
Vue.set(vm.items,indexOfltem,newValue)
-
vm.$set(vm.items,indexOfltem,newValue) 和前面的小效果一样，只是写法不同
1⃣️ 参数一表示要处理的数组名称
2⃣️ 参数二表示要处理的数组索引
3⃣️ 参数三表示要处理的数组的值
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
list:["apple","orange","banana"]
},
})
//把数组中第二个数据改成茄子
vm.$set(vm.list,1,"茄子")
</script>
</body>
二. Vue模版语法
前段渲染方式
-
插值表达式
-
指令
-
事件绑定
-
属性绑定
-
样式绑定
-
分支循环结构
2.指令
2.1 数据绑定指令
-
v-text 填充纯文本
1⃣️ 相比插值表达式更加简洁
-
V-html 填充HTML片段
1⃣️ 存在安全问题
2⃣️ 本网站内部数据可以使用，来自第三方的数据不可以用
-
v-pre 填充原始信息
1⃣️ 显示原始信息，跳过编译过程
<div>v-html="msg"</div> <!--和插值表达式一样页面显示的是data里msg的值-->
<div>v-text='msg'</div><!--和插值表达式一样页面显示的是data里msg的值，不安全！-->
<div>v-pre="msg"</div><!--页面显示的是msg,而不是msg的值-->
2.2 数据响应式
-
如何理解响应式
1⃣️ html5中的响应式（屏幕尺寸的变化导致样式的变化）
2⃣️ 数据的响应式（数据的变化导致页面内容的变化）
-
什么是数据绑定
1⃣️ 数据绑定： 将数据填充到标签中
2⃣️ vue是双向绑定，用v-model绑定可以实现
-
v-once只编译一次
1⃣️ 实现内容之后不再具有响应式功能
2.3自定义指令
-
自定义指令用法
<input type="text" v-focus>
3.事件绑定
3.1vue如何处理事件？
-
v-on指令用法
<input type=''button" v-on:click=''''/>
-
V-on. 缩写： @
<input type=''button" @click=''''/>
3.2事件函数的调用方式
-
直接绑定函数名称，无参数，默认有一个事件对象
<button @click="say">Hello</button>
-
调用函数(有参数)
<button @click="say(123,333,$event)">Hello</button>
<body>
<div id="app">
<div>{{num}}</div>
<!-- 直接调用，默认会有事件函数-->
<button @click="handle">点击1</button>
<!-- 可以传参数，$event事件函数要手动添加，必须在最后一个-->
<button @click="handle(123,456,$event)">点击2</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm= new Vue({
el:'#app',
data:{
num:0,
},
methods:{
/*
事件绑定-参数传递
1。如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
*2。如果时间绑定函数调用，（传递参数），那么事件对象必须在最后一个
3。$event事件函数是固定写法
*/
handle:function (p,k,event) {
//这里的参数就是获取到的参数123，和456
console.log(p,k)
//$event是事件对象，
//$event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素
console.log(event.target)
// 这里的this是Vue的实例对象
this.num++;
}
}
})
</script>
</body>
3.3事件修饰符
-
.stop阻止冒泡
-
.prevent阻止默认行为
3.4 按键修饰符
-
.enter 回车键
<input v-on :keyup.enter="submit">
-
.delete 删除键
<input v-on :keyup.delete="handle">
3.5 简易得计算机案例
-
实现逻辑
-
1.先绑定input a，input b. ,input 结果
-
2.data里面定义a、b、结果三个熟悉
-
然后点击按钮触发事件，在方法里写相加的逻辑
<body>
<div id="app">
<h1>简易计算机</h1>
<div>
<span>数值A：</span>
<span><!--绑定a-->
<input type="text" v-model="a">
</span>
</div>
<div>
<span>数值B：</span>
<span><!--绑定b-->
<input type="text" v-model="b">
</span>
</div>
<div>
<button @click="handel">计算</button>
</div>
<div>
<span>计算结果</span>
<!--绑定result-->
<span v-text="result"></span>
</div>
</div>
<script src="js/vue.js"></script>
<script >
var vm= new Vue({
el:'#app',
data:{
a:'',
b:'',
result:''
},
methods:{
handel:function () {
//实现计算逻辑
// parseInt(this.a)转换成int ,不转换的话是就会拼接
this.result= parseInt(this.a)+ parseInt(this.b);
}
}
})
</script>
</body>
4.属性绑定
4.1 vue如何动态处理属性？
-
v-bind指令用法
<a v-bind:href="url"></a>
-
缩写形式
<a :href="url"></a>
<body>
<div id="app">
<!-- v-bind是属性绑定 ，简写成 ：-->
<!-- 现在就是绑定了data里面的url的地址-->
<a :href="url">跳转</a>
<button @click="handle">切换</button>
</div>
<script src="js/vue.js"></script>
<script >
var vm= new Vue({
el:'#app',
data:{
url:'http://www.baidu.com'
},
methods:{
handle:function () {
//修改URL的地址
this.url='http://itcast.cn';
}
}
})
</script>
</body>
4.2 v-model的底层实现原理分析
-
v-model其实就是v-bind和v-on组合起来的
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
5.样式绑定
5.1 class样式处理
-
对象语法
<div v-bind:class="{active: isActive}"></div> -
数组语法
<div v-bind:class="{a,b}"></div>
5.2 Style样式处理
-
对象语法
<body>
<div id="app">
<!-- //内联样式Style-->
<div v-bind:style="{border:borderStyle1,widthStyle,height:heightStyle}"></div>
<!-- //内联绑定对象-->
<div v-bind:style="objStyles"></div>
<button v-on:click="handle">切换</button>
</div>
<script src="js/vue.js"></script>
<script >
var vm= new Vue({
el:'#app',
data:{
borderStyle1:"1px solid blue",
widthStyle:"100px",
heightStyle:"200px",
objStyles:{ /*对象*/
border:"1px solid green",
"200px",
height:"100px"
}
},
methods:{
handle:function () {
//点击事件之后可以把高度切换成100px
this.heightStyle='100px';
//点击事件之后可以把对象里面的宽度切换成30px
this.objStyles.width="30px";
}
}
})
</script>
</body>
6.分支循环结构
6.1 分支结构
-
v-if
-
v-else
-
V-else-if
-
V-show
6.2 循环结构
-
v-for遍历数组
<li v-for="item in list">{{item}}</li>
三. Vue常用特性
常用特性概览
-
表单操作
-
计算属性
-
过滤器
-
监听器
-
生命周期
1.表单操作
1.1基于Vue的表单操作
-
Input 单行文本
-
textarea 多行文本
-
select 下拉多选
-
Radio 单选框
-
Checkbox 多选框
<body>
<div id="app">
<form>
<!-- input单行表单-->
<div>
<span>姓名：</span>
<span>
<!-- v-model默认是双向绑定-->
<input type="text" v-model="name1">
</span>
</div>
<!-- 单选按钮-->
<div>
<span>性别</span>
<span>
<!-- v-model绑定-->
<input type="radio" id="male" value="1" v-model="gender">
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="gender">
<label for="female"></label>
</span>
</div>
<!-- 多选按钮 -->
<div>
<span>爱好</span>
<input type="checkbox" id="ball" value="1" v-model="aihao">
<label for="ball">篮球</label>
<input type="checkbox" id="pai" value="2" v-model="aihao">
<label for="pai">排球</label>
<input type="checkbox" id="pingpang" value="3" v-model="aihao">
<label for="pingpang">乒乓球</label>
</div>
<!-- 下拉框 -->
<div>
<span>职业</span>
<select v-model="zhiye">
<option value="0">请选择职业</option>
<option value="1">教师</option>
<option value="2">程序员</option>
<option value=