vue 之 基础知识(@的使用)
(1) 文本插值 {{}}
{{ 表达式(有返回值) }}
(2) v-bind 一般用在属性上
1> <innput type="text" :value="val">
2><img :src="url"/> url:'../assets/logo.png' 会出现图片不显示问题
src: require("../assets/logo.png"),
扩展:语法糖: v-bing:title="title" 可以简写为 :title="title"
(3)v-on指令 绑定事件
1>三种写法:
第一种:内联语句 (注意:只能写简单的表达式且console.log('111'),这种语句会报错)
<button v-on:click="isShow = true">点击</button> <span v-show="isShow">测试内容</span>
第二种:定义的方法放在methods中
<button @click="fn">调用methods中的方法</button>
第三种:定义的方法放在methods中,传参
<button @click="fn1('123', $event)">第三种</button>
fn1(res, e) {
console.log(res, e);
}
或者是
<button @click="fn2">第四种</button>
fn1(e) {
console.log(e);
}
扩展:语法糖: v-on:click="fn" 可以简写为 @click="fn"
(4) 事件修饰符
1> @click.prevent 阻止默认行为
<a href="http://baidu.com" @click.prevent="fn5"></a>
2>@click.prevent.stop 或者 @click.stop 阻止冒泡
3>@keyup.13, @keyup.enter 等等 按键修饰符,监听用户键盘
(5) 条件渲染指令
1> v-if v-else-if v-else
2>v-show
(6)v-model 双向绑定,主要是给表单元素来使用
1>文本框
<input type="text" v-model="message" />
2>单选框
<input type="radio" value="男" v-model="sex" />男 <input type="radio" value="女" v-model="sex" />女
3>下拉框
<select name="city" id="city" v-model="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="hz">杭州</option>
</select>
(7)v-model 双向绑定 修饰符
1>v-model.number 如果想自动将用户输入值,parseFloat转成数字类型,可用.number修饰符
<input type="number" v-model.number="age" />
2>v-model.trim 自动过滤用户输入的首尾空白字符
<input type="text" v-model.trim="message" />
3>v-model.lazy 在change时而非input时更新,通过lazy修饰符
<input type="text" v-model.lazy="msg" />
(8)v-text 和 v-html
<h2 v-text="message"></h2> <h2 v-html="message"></h2>
(9) v-for 的使用
1>第一种
<ul>
<li v-for="item in citys" :key="item">{{ item }}</li>
</ul>
citys: ["北京", "上海", "深圳", "杭州"],
2>第二种
<ul>
<li v-for="(item, index) in persons" :key="index">
{{ item.name }}
</li>
</ul>
(10) computed 计算属性
1.写起来像一个方法
2.用起来像一个属性
3.计算属性不要和data里面的属性
computed: {
totalPrice() {
let res = 0;
this.list.forEach((item) => {
res += item.price;
});
return res;
},
svg() {
console.log(this.totalPrice);
console.log(this.list.length);
return this.totalPrice / this.list.length;
}
}
(11) 过滤器
第一种:全局
Vue.filter("date", (val, type = "YYYY-MM-DD") => {
return moment(val).format(type);
});
第二种:局部
filters: { date1: function(val) { return moment(val).format("YYYY-MM-DD"); }, },(12)自定义指令
1>全局指令
Vue.directive('red',{
inserted:function(el){
el.style.color:'red'
}
})
2>局部指令
directives: { focus: { inserted(el) { el.focus(); }, }, },
(13)监听
1> 监听简单类型
watch:{
msg:(newVal)
{
console.log('msg有变化')
}
}
2>监听复杂类型之对象
watch:{
obj:{
deep:true,//深度监听
immediate:true ,//立即监听 页面刷新也会监听
handler(newObj){
console.log('监听成功')
}
}
}
或者
watch:{
'obj.name'(newName){
console.log('哈哈'+newName)
}
}
}
3> 监听复杂类型之数组
list:{
deep:true,
handle(newList){
console.log(newList)
}
}
或者
list(newList)
{
console.log(newList)
}
(14)组件
1>注册全局组件
Vue.component("my-cpn", cpnC);
2>注册局部组件
var vm = new Vue({
el: "#app",
data: {},
components: {
cpn: cpnC, //重要代码
},
});
3>父子组件
<1>父传子
第一步:子组件写props
1/ 可以是数组 ['name','age']
2/可以是对象
props:{
propE:{
type:Object,或者可以是其他数据类型
require:false
default:function(){
return {message:'hello'}
}
}
}
第二步:在子组件上写参数
<son :cname="name" :cage="age" :cobjects="objects">
<2>子传父
第一步:子组件触发自定义事件
this..$emit('my-click',xxx)
第二步:给子组件添加自定义事件,并且绑定事件处理函数
<child @my-click='fn'></child>
第三步:触发自定义事件,函数会被调用
fn(xxx){
...
}
propE:{
type:Object,
require:false
default:function(){
return {message:'hello'}
}
}
vue中绝对路径@的使用
@指代src目录
在script 和 template中直接使用
<script> import Login from '../views/Login' import Login from '@/views/Login' </script> <template> <img src='../../assets/1.jpg'></img> <img src='@/assets/1.jpg' alt=""> </template>
在<style里面使用不一样
body{
background:url(../assets/1.jpg)
background:url(~@/assets/1.jpg)
}
