Vue进阶学习

Vue进阶学习

1. v-if & v-show

<div id="app">
    <input type="button" value="点我改变show的boole值" @click="show = !show"><br>
    <span v-if="show">你看见我了，v-if</span><br>
    <span v-show="show" >你看见我了，v-show</span><br>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            show: false
        }
    });

v-if直接不渲染，v-show只是修改样式。
v-if的效率更高

1.2 v-if、v-else-if和else

	<input type="button" value="点我生成随机数" @click="random=Math.random()">{{random}}<br>
    <span v-if="random > 0.75">random>0.75</span>
    <span v-else-if="random > 0.5"> random>0.5</span>
    <span v-else-if="random > 0.25">random>0.25</span>
    <span v-else>random>0</span>
	
	random: 0 //赋默认值

注意： v-if、v-else-if和else一定要连起来使用，不然没用效果
br换行都不能加，加了就会报错

1.3 v-if 和 v-for结合使用

<style>
    .active{

    }
</style>

 <ul>
 	<!-- 一定是双等号 -->
    <li v-for="u in users" v-if="u.gender == '女'">{{u}}</li>
 </ul>

 users:[
         {name:'柳岩', gender:'女', age: 21},
         {name:'范冰冰', gender:'女', age: 24},
         {name:'刘亦菲', gender:'女', age: 18},
         {name:'古力娜扎', gender:'女', age: 25},
         {name:'张三', gender:'男', age: 25},
         {name:'李四', gender:'男', age: 25}
]

2. v-bind 可简写为：

v-bind:class="{active: store >0 } == :class="{active: store >0 }

<input type="text" v-model="store">
<input type="button" v-bind:class="{active: store >0 }" value="加入购物车">

store:0

0的时候没有样式，大于0就有

当有多个样式的时候，直接在后面追加class标签就行，可以共存

<input type="button" :class="{active: store >0 }" class="aaa bb ccc" value="加入购物车">

3.计算属性

方法必须加括号，computed：计算属性必须不加括号
计算属性必须有返回值，得到的值可以作为数据模型来使用
由于计算属性先从缓存查询，所以效率更高，而方法每次都会重新执行

 <span>{{getBirthday()}}</span>
 <span>{{getBirthday2}}</span>

methods:{
    getBirthday(){
            const date = new Date(this.birthday);
            return date.getFullYear() +"年"+date.getMonth()+"月"+date.getDate()+"日";
        }
    },
computed:{
    getBirthday2(){
        const date = new Date(this.birthday);
        return date.getFullYear() +"年"+date.getMonth()+"月"+date.getDate()+"日";
    }
}

4.watch监听

注意：要监听的数据模型必须和watch中的方法名一致

wacth<input type="text" v-model="search">

数据模型： 
search: ""

watch:{
    search(newVul,oldVul){
       console.log(newVul,oldVul);
}

5.组件

5.1全局组件

<div id="app">
    <counter></counter>
</div>

 Vue.component("counter", {
        template: "<button @click='num++'>点我加一{{num}}</button>",
        data() {
            return {
                num: 0
            }
        }
    });

    const vue = new Vue({
        el: "#app"
    });

5.2局部组件

<div id="app">
    <hello1></hello1>
</div>

 const hello = {
        template:'<div>我是{{name}}</div>',
        data(){
            return {
                name:'张三'
            }
        }
    };
 const vue = new Vue({
        el: "#app",
        components:{
            hello1:hello //将定义的对象注册给组件
        }

5.3父向子通信

<div id="app">
    <!--使用子组件，同时传递title属性-->
    <component :title="num1"></component>
</div>
</body>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    Vue.component("component",{
        // 直接使用props接收到的属性来渲染页面
        template:"<button @click='title++'>点我加一{{title}}</button>",
        props:["title"] // 通过props来接收一个父组件传递的属性
    });

    const vue = new Vue({
        el: "#app",
        data:{
            num1:0
        }
    });
</script>

5.4子向父通信

<div id="app">
    <component :title="num1" @incr1="incr()"></component>
    {{num1}}
</div>
</body>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    Vue.component("component",{
        template:"<button @click='subIncr()' >点我加一{{title}}</button>",
        props:["title"],
        methods:{
            subIncr(){
                this.$emit("incr1")
            }
        }
    });

    const vue = new Vue({
        el: "#app",
        data:{
            num1:0
        },
        methods:{
            incr(){
                this.num1++
            }
        }
    });
</script>

6.路由

注意：组件内的template只能有一个根标签  一个汉字的距离   半个汉字的距离

login.js

const loginForm = {// 组件内的template只能有一个根标签   一个汉字的距离
    template: ` 
        <div>
            <h1>登录页</h1>
            用户名<input type="text"><br/>
            密&emsp;码<input type="password"><br/>
            <input type="button" value="登录">
        </div>
    `
};

register

const registerForm = {// 组件内的template只能有一个根标签   一个汉字的距离   半个汉字的距离
    template: ` 
        <div>
            <h1>注册页</h1>
            用&ensp;户&ensp;名<input type="text"><br/>
            密&emsp;&emsp;码<input type="password"><br/>
            确认密码<input type="password"><br/>
            <input type="button" value="注册">
        </div>
    `
};

index.html

<body>
    <div id="app">
        <span><router-link to="/login">登录</router-link></span>
        <span><router-link to="/register">注册</router-link></span>
        <hr/>
        <router-view></router-view>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script src="js/login.js"></script>
<script src="js/register.js"></script>
<script>

    const router = new VueRouter({
        routes:[
            {
                path: "/login",
                component: loginForm
            },
            {
                path: "/register",
                component: registerForm
            }
        ]
    });

    const vue = new Vue({
        el: "#app",
        router
    });
</script>