vue语法

<!DOCTYPE html>
<html>

<body>
    <div id="app1">

        <!--三、指令-->
        <!--1.插值表达式-->
        {{name}}
        <!--2.v-text 绑定文本-->
        <div v-text='age'></div>
        <!--3.v-html 绑定html-->
        <div v-html="age"></div>
        <!--4 v-bind 绑定属性，可用:代替-->
        <a v-bind:href="link">baidu</a>
        <span v-bind:class="{active:isActive}" :style="{color:color}">111</span>
        <!--5.v-model 绑定表单 （双向）-->
        <input v-model="link" />
        <!--6. v-on 指令，可用@代替-->
        <button v-on:click="hello">hello</button>
        <!--（1）事件修饰符 
            内部.stop 阻止冒泡
            .prevent  阻止事件
        -->
        <div style="padding:20px; border :1px solid red" @click=hello()>外
            <div style="padding:20px; border :1px solid green" @click.stop=hello()>内
                <a v-bind:href="link" @click.prevent>baidu</a>
            </div>
        </div>
        <!--(2)按键修饰符 up,down ,enter,tab...-->
        <input v-model="num" @keyup.up="num+=2" @keyup.down="num--"></input>
        <!-- 7 v-for 遍历-->
        <!--（1） 遍历数组 ，加上:key绑定唯一键能提高渲染效率
            "each in arr" "(each,index) in arr"    
        -->
        <li v-for=" (each,i) in users" :key="each.name">
            {{i}}: {{each.name}}--{{each.age|numFilter}}
        </li>
        <!--（2） 遍历对象
            "each in obj"  "(value,key) in obj"    "(value,key,index) in obj"    
        -->
        <br />
        <li v-for=" (v,k,i) in user">
            {{i}}: {{k}}--{{v}}
        </li>

        <!--8.v-if v-else-if v-else 判断 -->
        <h1 v-if="num<10">10</h1>
        <h1 v-else-if="num<20">20</h1>
        <h1 v-else-if="num<30">30</h1>
        <h1 v-else>40</h1>

        taotalAge: {{totalAge}}


        <!--四、组件化  template -->

        <br />
        <counter></counter>
        <br />
        <counter></counter>
        <br />
        <thisCounter></thisCounter>
        <br />
        <thisCounter></thisCounter>
    </div>

    <!--
        一、安装vue@2.6.10
        1.打开文件夹，terminal执行npm install vue@2.6.10
        2.创建index.htlm引入 vue.js
    -->
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        //四、1.全局声明注册一个组件,并在当前vue实例的components中加入
        Vue.component('counter', {
            //vue实例的el改为template
            template: `<button @click="count++"> 点击了{{count}}次</button>`,
            //data改为方法
            data() {
                return {
                    count: 1
                }
            }
        });
        //四、2.声明局部组件
        var thisCounter = {
            //vue实例的el改为template
            template: `<button @click="count++"> 点击了{{count}}次</button>`,
            //data改为方法
            data() {
                return {
                    count: 1
                }
            }
        };


        //二、vue声明式渲染
        new Vue({
            //绑定元素
            el: '#app1',
            //封装数据
            data: {
                name: '张三',
                age: '<font color="red">18</font>',
                link: "http://www.baidu.com",
                isActive: true,
                fontSize: 30,
                color: 'green',
                num: 0,
                users: [{ name: '张飞', age: 17 }, { name: '刘备', age: 20 }, { name: '关于', age: 19 }],
                user: { name: '张飞', age: 17 }
            },
            //封装方法
            methods: {
                hello() {
                    alert("hello")
                },
                show() {
                    var n = Math.floor(Math.random() * 100);
                    alert(n);
                    return n % 2 == 1;
                }
            },
            //计算属性
            computed: {
                //以数据的方式调用
                totalAge() {
                    return this.users[0].age + this.users[1].age
                }
            },
            //侦听器：监控某个数据
            watch: {
                num(newVal, oldVal) {
                    console.log(newVal, oldVal);
                }
            },
            //过滤器
            filters: {
                numFilter(val) {
                    console.log(val)
                    if (val >= 20) {
                        return val * 2
                    } else {
                        return val
                    }
                }

            },
            //局部组件
            components: {
                thiscounter: thisCounter
            }
            //生命周期函数 created   mounted  updated destoryed ...



        })





    </script>
</body>

</html>