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;
    }
  }

<td colspan="2">总价钱：{{ totalPrice }}</td>

(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)

第二步:给子组件添加自定义事件,并且绑定事件处理函数

第三步:触发自定义事件,函数会被调用

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)
  
}