Vue属性

1.生命周期钩子函数

简单可以理解为事件函数。生命周期钩子函数 。vue实例对象的这个轮回。 new Vue( { } )

 <div id="app">
        {{username}}
        <input type="text" v-model="username">
        <button @click="kill">销毁</button>
    </div>
    <script src="vue.js"></script>

• beforeCreate 创建之前

• created 创建完成

  <script>
        new Vue({
            el: '#app',
            data: {
                username: 'zs'
            },
            //vue实例创建之前
            beforeCreate() {
                console.log(this.$el);
                console.log(this.username);
            },
            //vue实例创建完成
            created() { //可以发ajax请求：更推荐在此方法中调用 。可以很好的避免闪屏问题。
                console.log(this.$el);//未挂载，因此无dom。
                console.log(this.username);//能够的到数据，因为实例对象已经创建完成。
            }
        });
    </script>

• beforeMount 挂载之前
• mounted 挂载完成

  <script>
        new Vue({
            el: '#app',
            data: {
                username: 'zs'
            },
            //挂载之前：指的是vue实例对象已经存在，但是数据未挂载到dom，因此数据不能渲染到页面上。
            beforeMount() {
          console.log(this.$el); // 可以访问到dom，但是数据未挂载到dom,模板未解析
                console.log(this.username);//数据能拿到，但不能渲染到页面。
            },
            //挂载完成：数据挂载到dom,模板已解析，数据渲染到页面上。
            mounted() { //可以发ajax请求,绑定渲染数据完成后的一些事件
              console.log(this.$el); //生成新的dom覆盖原来的dom
              console.log(this.username);
            },
        });
    </script>

• beforeUpdate 更新之前

• updated 更新完成

  <script>
     new Vue({
         el: '#app',
         data: {
             username: 'zs'
          },
          //视图更新之前.
          beforeUpdate() {
                console.log(this.username, 'this.username') //data中的数据最新的
            },
          //视图更新完成
          updated() {
                console.log(this.username, 'this.username') 
            },
        });
    </script>

• beforeDestroy 销毁之前

• destroyed 销毁完成

<script>
    new Vue({
        el: '#app',
        data: {
            username:'zs'
        },
        methods: {
            kill(){
                this.$destroy()
            }
        },
        //销毁之前
        beforeDestroy(){ //清空一些你之前在mouted绑定的一些事件和定时器
            console.group('-------------beforeDestroy------------')
            console.log( 'beforeDestroy' ) //
            console.groupEnd()
        },
        //销毁完成
        destroyed(){ 
            console.group('-------------destroyed------------')
            console.log( 'destroyed' ) //
            console.groupEnd()
        },
    })
</script>

侦听器(watch)

定义

侦听器又名监听器，侦听器是属于vue中的对象，对象里是方法,用来监听data数据的改变,从而做出及时的响应。

普通监听

• 监听器中方法名是其data中对应的属性名,即以data中的变量命名。
• 系统自动注入两个参数, newVal: 更新后的新值 oldVal:更新前的旧值
• 监听器中的所有方法都无需调用,当被监听的数据发生改变时,自动被执行

<div id="app">
    <h2>username</h2>
    <input type="text" v-model="username">
    <hr>
    <h2>arr</h2>
    <input type="text" v-model="arr[1]">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            username:'zs',
            arr:[ 22,33 ]
        },
        watch:{
            //普通兼听：字符串、数组的数据都可以使用普通兼听
            username( newValue,oldValue ){ //要兼听哪个数据，就在watch以改属性名命名方法名
				console.log( newValue,oldValue )
            },
            arr(newValue,oldValue ){ //数组的新值和原一致，这是引用类型造成的。
                console.log( newValue,oldValue )
            },
        }
    })
</script>

深度监听

• 对象的监听必须使用深度监听。

• 深度监听需要使用固定方法handler和deep属性为true。
• 深度监听的deep属性的值为false时为普通监听。
• 系统自动注入一个参数: newVal,因为对象为引用类型所以只有一个值。

<div id="app">
    <h2>person</h2>
    <input type="text" v-model="person.username">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            person:{
                username:'ls'
            }
        },
        //兼听data中的数据
        watch:{
            //深度兼听：兼听对象的。必须用深度兼听
            person:{
                handler( newValue ){ //对象的新值和原值一致，这是引用类型造成的。
                    console.log('person数据变了会触发此函数')
                    console.log( newValue,'新值' )
                },
                deep:true ,//默认为false，设置为true代码深度兼听，
            }
        }
    })
</script>

百度搜索

jsonp跨域
步骤:
1.创建script标签
2.为script标签增加src属性，并且是不是要传递一个cb或callback的参数给后端
3.将script追加到文档中，才会发请求
4.返回的格式是jsonp的格式： 函数名( {} )

<!-- 搜索接口 `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=key&cb=render` -->
<!-- 搜索接口 'https://www.baidu.com/s?wd=key' -->

计算属性(computed)

computed，是个对象，里面存放函数，但是以变量（ 属性）的方式进行使用。里面存放函数本质上就是变量

作用

应用： 计算属性是当作变量来使用的，和data中的数据使用场景一样。

• 使用计算属性可以处理一些复杂的特殊的业务逻辑

• 一行代码无法实现的逻辑时,需要使用计算属性

使用

• 方法名（变量名）自定义 注意：虽然是以函数形式写，但是一个变量，因此不能与data中的变量名重复。
• 在计算属性方法中必须要有return
• return的结果被其方法名所接收
• data中的属性名不能和computed中的方法名相同

<div id="app">
    <input v-model="code1" />
    <input v-model="code2" />
    {{reverseUppercase}}
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            code1:'aaa',
            code2:'ccc'
        },
        computed:{
            //把data中的code进行倒序并且大写，还不影响原来的
            //每一个计算属性中使用的数据如果变了，而这个自定义属性的值最终也会变
            reverseUppercase(){
                let code = this.code1 + this.code2
                return code.toUpperCase().split('').reverse().join('')
            }
        }
    })
</script>

计算属性和methods的区别

• 区别:
  1.computed中方法名直接书写, methods方法名需要调用
  2.computed中有缓存数据,在计算属性中他的数据依赖于data数据,**相同的函数被调用多次，也只会调用一次。**只有当data中的数据发生改变时,才会被再次执行.优势:提高运行效率
  3.methods中的方法,调用几次就执行几次.

• 相同:
  1.执行结果都一样
  2.都是采用function进行声明

• 应用场景:
  1.处理一些复杂的业务逻辑时,需要产生结果时,使用computed
  2.一般用来处理事件函数时,使用methods

 <div id="app">
       <table width="500" border="1" style="border-collapse: collapse;">
            <tr v-for="item in scores" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.username}}</td>
                <td>{{item.shuxue}}</td>
            </tr>
            <tr>
                <td>方法：数学总分：{{getTotalScore1()}}</td>
                <td>数学平均分：{{getTotalScore1()}}</td>
                <td>数学最高分：{{getTotalScore1()}}</td> 
            </tr>
            <tr>
                <td>计算属性：数学总分：{{getTotalScore2}}</td>
                <td>数学平均分：{{getTotalScore2}}</td>
                <td>数学最高分：{{maxScore}}</td> 
            </tr>
        </table>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                scores:[
                    { id:1,username:'zs1',shuxue:98 },
                    { id:2,username:'zs2',shuxue:88 }
                ]
            },
            methods:{
                //总成绩
                getTotalScore1(){
                    console.log( '函数执行了' )
                    let total = 0
                    this.scores.forEach(item=>{
                        total+= item.shuxue
                    })
                    return total
                }
            },
            computed:{
                //数学最高分
                maxScore(){
                    this.scores.sort( (user1,user2)=>{
                        return user1.shuxue - user2.shuxue
                    } )
                    return this.scores[this.scores.length - 1].shuxue
                }
            }
        })
    </script>

计算属性的完整写法（get和set方法）

<div id="app">
    {{reverseUppercase}}
    <input type="text" v-model="reverseUppercase">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            code: 'abcd'
        },
        computed: {
            //完整写法:了解即可
            reverseUppercase: {
                get() {
                    return this.code.toUpperCase()
                },
                set(newValue) { //newValue : 形参
                    this.code = newValue
                }
            }
        }
    })
</script>

过滤器（filters）

• 写在vue实例对象里的filters对象，对象里有方法，方法名自定义，本质是方法。
• 系统自动传递第一个形参为e。使用过滤器的变量被e接收。
• 如有参数写小括号调用。第二个形参接收。
• 过滤器方法中必须有return,return的结果被其方法名所接受
• 注意模板中要写 | 管道符。

局部过滤器

• 局部过滤器是写在vue实例对象里的filters对象里,即只能当前vue实例的模板里能用。

<div id="app">
        <!-- 1. 在变量中使用过滤器 | ： 管道符 -->
        {{code1 | toFirstUpperCase}}
        <!-- 2. 过滤器可以传参的 -->
        {{ 20 | priceToFixed(2) }} -- 两位小数
        <hr>
        {{ 35 | priceToFixed(3) }} -- 三位小数
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                code1:'abcd', //把第1位转换成大写
            },
            //过滤器：filters为一个对象
            filters:{ //过滤里定义过滤函数。
                toFirstUpperCase(e){ //形参接收 哪个变量使用过滤器，则当前这个data变量就传递过来了
                    //需要一个return返回值
                    return e.substring(0,1).toUpperCase() + e.substring(1)
                },
                priceToFixed(e,num){
                    console.log( num,'保留几位' )
                    if( !num ){
                        num = 2 //如果未传则默认2位
                    }
                    return e.toFixed(num)
                }
            }
           
        })
    </script>

全局过滤器

• 注意：如果是全局过滤器，先定义全局过滤器后 new Vue实例化。
• 全局过滤器写在全局作用域，所有vue实例都可使用。

Vue.filter( 过滤器名称,callback )

<div id="app">
        {{code1 | toFirstUpperCase}}
    </div>

<div id="root">
        {{code1 | toFirstUpperCase}}
    </div>

    <script src="vue.js"></script>
    <script>

        //全局定义过滤器语法
 Vue.filter( 'toFirstUpperCase',(e)=>{//形参接收 哪个变量使用过滤器，则当前这个data变量就传递到e.
            return e.substring(0,1).toUpperCase() + e.substring(1)
        } )
        new Vue({
            el:'#app',
            data:{
                code1:'abcd', 
            },
        })
       new Vue({
            el:'#root',
            data:{
                code2:'cxd', 
            },
        })
    </script>

全局过滤器和局部过滤器的区别

• 对某一个数据频繁使用,并且是要实现过滤时,使用全局过滤器即可。
• 对一写数据只在某几个功能中使用,建议使用局部过滤器.

template

new Vue({
            el:'#app',
            template:'<div></div>'//重新渲染
        })

render

new Vue({
            el:'#app',
            render: h => h(App)//注册app组件。替代components。因为跨文件因此推荐render。
        })

路由（router）

new Vue({
            el:'#app',
            router:router实例对象
        })