vue 之 基础知识(@的使用)

 

(1) 文本插值 {{}}

      {{ 表达式(有返回值) }}  

(2) v-bind  一般用在属性上

    1> <innput type="text" :value="val">

    2><img :src="url"/>     url:'../assets/logo.png'    会出现图片不显示问题   

?

1	src: require("../assets/logo.png"),

    扩展:语法糖:  v-bing:title="title"   可以简写为   :title="title"

(3)v-on指令 绑定事件　　

     1>三种写法:

      第一种:内联语句  (注意:只能写简单的表达式且console.log('111'),这种语句会报错)

?

1 2	<button v-on:click="isShow = true">点击</button> <span v-show="isShow">测试内容</span>

　　第二种:定义的方法放在methods中

?

1	<button @click="fn">调用methods中的方法</button>

　　第三种:定义的方法放在methods中,传参

?

1 2 3 4 5 6 7

<button @click="fn1('123', $event)">第三种</button>   fn1(res, e) {       console.log(res, e); }<br><br>或者是<button @click="fn2">第四种</button>fn1(e) {    console.log(e); }<br><br>

     扩展:语法糖: v-on:click="fn"    可以简写为     @click="fn"

 (4) 事件修饰符

   1> @click.prevent  阻止默认行为

?

1	<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>文本框   

?

1	<input type="text" v-model="message" />

    2>单选框 

?

1 2	<input type="radio" value="男" v-model="sex" />男 <input type="radio" value="女" v-model="sex" />女

　3>下拉框

?

1 2 3 4 5

<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修饰符　　

?

1	<input type="number" v-model.number="age" />

　2>v-model.trim  自动过滤用户输入的首尾空白字符　

?

1	<input type="text" v-model.trim="message" />

　3>v-model.lazy 在change时而非input时更新,通过lazy修饰符

?

1	<input type="text" v-model.lazy="msg" />

(8)v-text 和 v-html

?

1 2	<h2 v-text="message"></h2> <h2 v-html="message"></h2>

(9)　v-for 的使用

   1>第一种

?

1 2 3 4

<ul>       <li v-for="item in citys" :key="item">{{ item }}</li> </ul> citys: ["北京", "上海", "深圳", "杭州"],

　2>第二种

?

1 2 3 4 5

<ul>       <li v-for="(item, index) in persons" :key="index">         {{ item.name }}       </li> </ul>

　　

(10)　computed 计算属性

  1.写起来像一个方法

  2.用起来像一个属性

  3.计算属性不要和data里面的属性

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

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

 (11)　过滤器

第一种:全局

?

1 2 3

Vue.filter("date", (val, type = "YYYY-MM-DD") => {   return moment(val).format(type); });

第二种:局部

?

1	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> 监听简单类型

?

1 2 3 4 5 6

watch:{     msg:(newVal)    {        console.log('msg有变化')    }  }

　2>监听复杂类型之对象

?

1 2 3 4 5 6 7 8 9 10 11

watch:{    obj:{       deep:true,//深度监听<br>      immediate:true ,//立即监听 页面刷新也会监听       handler(newObj){          console.log('监听成功')      }   } }    <br>或者watch:{     'obj.name'(newName){<br>　　　　　console.log('哈哈'+newName)<br>     }   } }

  3> 监听复杂类型之数组

?

1 2 3 4 5 6

list:{     deep:true,     handle(newList){        console.log(newList)    }  }<br>或者<br>list(newList)<br>{<br>  console.log(newList)<br>}

　　

(14)组件

  1>注册全局组件

?

1	Vue.component("my-cpn", cpnC);

  2>注册局部组件

?

1 2 3 4 5 6 7

var vm = new Vue({     el: "#app",     data: {},     components: {       cpn: cpnC, //重要代码     }, });

　　

  3>父子组件

 <1>父传子

 第一步:子组件写props

     1/ 可以是数组 ['name','age']

     2/可以是对象

?

1 2 3 4 5 6 7 8

props:{<br>   propE:{     type:Object,或者可以是其他数据类型     require:false     default:function(){     return  {message:'hello'}     }   } }

第二步:在子组件上写参数

?

1	<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中绝对路径@的使用

?

1

@指代src目录

在script 和 template中直接使用

?

1 2 3 4 5 6 7 8 9

<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里面使用不一样

?

1 2 3 4 5

body{    background:url(../assets/1.jpg)    background:url(~@/assets/1.jpg)     }