Vue

v-pre

让胡子语法失效 让{{}}显示出来应该有的内容

<p> 当我输入<span v-pre>{{msg}}</span>的时候你可以看到{{msg}}</p>

---

v-cloak

指令用于在数据渲染出来之前，将标签隐藏掉，这样用户就看不到胡子语法。

<style>
    [v-cloak]{
        display: none;
    }
</style>


<li>{{msg1}}</li>
<li v-cloak>{{msg2}}</li>

---

v-model

 <div id="app">
        <input type="text" v-model='word'>
        <h2>{{word}}</h2>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            word:'hello word'
        }
    })
</script>   

---

v-html和v-text

    胡子语法与v-text是一样的，都无法解析html标签
    v-html比较强大，可以将html标签解析出来

---

v-show

里面传入的是一个布尔值进行判断 如果为 ture 执行 反之亦然

---

v-if的使用

<ul>
    <li v-if='score>90'>优秀</li>
    <li v-else-if='score>60'>及格</li>
    <li v-else>不及格</li>
</ul>

---

v-for

<li v-for='(item,index) in arr'> {{index}}--{{item}}</li>
       
data: {
    arr:['张三','法外','狂徒','格雷福斯']
}

---

v-model

v-model是一个语法糖 真实样式如下

v-model = :value + @input

 @input 传方法
 <!-- <input type="text" :value = 'msg' @input='iptchange'> -->
 
 @input 单行操作 $event代表函数里的事件e
 <input type="text" :value = 'msg' @input='msg=$event.target.value'>
 <h3>{{msg}}</h3>
 
 
data: {
    msg:'你好世界'
},
methods:{
    iptchange(e){
        this.msg = e.target.value
    }
}
 

插值语法

---

控制属性名

v-开头都是vue的指令	让普通的标签属性的值为data中的属性名
<a v-bind:href='url'>百度一下</a>      //简写 :href  直接加一个 :

控制事件方法

<!-- v-on 时间指令 简写@-->
<button v-on:click='num1+=5;'> 按钮</button>
<button @click='add(10);'> 按钮简写</button>

控制类名

<div :class='{active:bool,current:bool2}'>1</div>

<div :class='['active','current']'>2</div>

也可以是一个三元运算符.利用布尔值控制有没有这个类名
<div :class='bool3 ? 'tctive': '' '> </div>

<div :class="[bool3 ? 'tctive': '' ,'current']"> </div>

简易写法
<span @mouseenter='num=1' :class="{topspan:num==1}">图片</span>
如果num=1返回ture 就会执行传值
<div :class=" [{contw:num==1},'cont'] ">

---

直接控制样式

H部分
<li :style=" { 'background' : bgcolor ,'color':green} "> 呜呜呜呜呜</li>
<li :style='[colorObj,italicObj]'>123</li>
<li :style=" getstyle() "> 呜呜呜123呜呜</li>


js部分
data: {
    bgcolor:'#fff',
    green:'green',
    colorObj:{ background : 'pink' ,color:'skyblue'}
    italicObj:{fontStyle:'italic'}
},
methods:{
    getstyle(){
        return [this.colorObj,this.italicObj]
    }

---

盒子显示隐藏

<button @click='btnclick'>按钮1</button>  //@ 是 v-on: 的简写 代表vue里面的事件

<div class="box" v-show='falg'></div>     // v-show  控制元素的显示和隐藏，相当于改变display值

---

计算属性

H部分
<p> 姓名:{{firstname}}  {{lastname}}</p>
<p> 姓名:{{username}}</p>
<p>姓名: <input type="text" v-model = 'username'> </p>


Vue部分

data: {
    firstname:'Michael',
    lastname:"jackson"
},
computed:{
    username:{
        get(){
           return this.firstname+' '+this.lastname
        } ,
        set(newVal){
           let arr = newVal.split(' ')
           this.lastname = arr[1]
           this.firstname = arr[0]
        }
    }

computed和methods对比

computed只能执行一次

methods可以执行多次

---

select多选框

<select name="" id="" v-model = 'reusle'>
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="watermolen">西瓜</option>
</select>


let kk =   new Vue({
      el: "#app",
      data: {
          reusle:'banana'
      }
  })
  kk.reusle = 'watermolen'

---

全局过滤器

一般用于控制整个页面部分的相同代码格式

<h3>{{price | filterMoney}}</h3>


//Vue.filter 过滤器  ('过滤器名称',配置项(){})

Vue.filter('filterMoney',(val)=>{
    return '$ '+ val.toFixed(2) + ' 美元'
})

优势:当同一过滤器使用多次时,写为全局下可以节省代码的操作

---

局部过滤器

与全局不同,全局写在外面,局部只能使用 在el挂载的里面

首先要写上filters包裹住方法

data: {
    price:21.8
},
filters:{
    filterMoney(val){
        return '$ '+ val.toFixed(2) + ' 美元'
    }
    }

本地存储

localStorage永久存储

// 添加数据；setItem的value值是字符串类型的数据
localStorage.setItem('name','张三')；
// 获取数据
localStorage.getItem('name'); // 张三
// 清空
localStorage.clear();

---

sessionStorage临时会话存储

// 添加数据；setItem的value值是字符串类型的数据
sessionStorage.setItem('name','张三')；
// 获取数据
sessionStorage.getItem('name'); // 张三
// 清空
sessionStorage.clear();

cookie

 document.cookie="usenmae = '132' "   //用live sever打开