Vue入门-3--------Vue组件和路由

钩子函数

 vue直接使用，如created()表加载模板之前调用该函数。

mounted()表渲染之后调用该函数。

<script>
    const app=new Vue({
        el:"#app",
        data:{
            name2:"张小帅2" ,
            number:1
        },
        methods:{//固定，里面表包含所有的方法
            incre(){//自定义的点击方法
                this.number++//this,表示#app所有对象，可以拿到该范围内的属性。
                console.log(this);
            }
        },
        created(){//使用钩子函数给number赋值
            this.number=1991;
        }
    });
</script>

Vue.js计算属性

计算属性关键词: computed，必须有返回值。好处，当computed所依赖的值没有发生改变，那么会直接读取缓存中的值，不会再次计算，只有当computed所依赖的值a或者b改变才再次计算。

<div id="app">
    <span>add={
  {add}}</span>
</div>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            a:100,
            b:200
        },
        computed:{//里面也是定义方法，但必须有返回值，可像模型数据一样使用。
            add(){
                return this.a+this.b;
            }
        }
    });
</script>

Vue.js 监听属性

 监听属性关键词: watch，可以通过 watch 来响应数据的变化。

<div id="app">
    <span>add={
  {add}}</span><br>
    <input type="text" v-model="query"/>
</div>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            a:100,
            b:200,
            query:''
        },
        computed: {//里面也是定义方法，但必须有返回值，可像模型数据一样使用。
            add() {
                return this.a + this.b;
            }
        },
        watch:{
            query(v1,v2){//该函数名要和模型属性一样。
                console.log(v1,v2);
            }
        }
    });
</script>

依次输入1,2,3,4,5后，如下可以知道：第一个参数v1是新值，第二个参数v2是旧值。

Vue.js 组件

组件（Component）按我简单理解就是html页面中嵌套各种html标签。在vue里，认为所有的vue实例都是一个组件。
全局组件
通过vue的component方法定义一个全局组件。

定义语法：Vue.component(tagName, options) //tagName 为组件名，options 为配置选项。

调用语法：  <tagName></tagName> ，通过组件名组的标签调用（也可以：<tag-name></tag-name>）。

<div id="app"><!--父组件-->
    <cc></cc> <!--子组件--><!--使用组件，通过组件名组的标签-->
<cc></cc> <!--子组件--><!--使用组件，通过组件名组的标签-->
<cc></cc> <!--子组件--><!--使用组件