vue模板语法

比眉伴天荒 2022-10-27 01:38 189阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>studyVue</title>
    </head>
    <body>
        <div id="app" @click.stop="hello">
            <input  type="text" v-model="num"/>
            <button v-on:click="num++">点赞</button>
            <button v-on:click="cancel">取消点赞</button>
            <h1>{
       {name}},当前有{
       {num}}人点赞</h1>
            <span v-html="msg"></span>
            <span v-text="msg"></span>
            <a v-bind:href="link" @click.prevent.stop="hello">百度</a>
            <hr>
            <p>v-model双向绑定</p>
            <input type="checkbox" v-model="language" value="java" />java<br>
            <input type="checkbox" v-model="language"  value="PHP"/>PHP<br>
            <input type="checkbox" v-model="language" value="python"/>python<br>
            选中了{
       {language.join(",")}}
        </div>
      
    <div id="app2">
    <li  v-for="(user,index) in users" :key=user.name>
    >
        {
       {index}}:{
       {user.name}}==>{
       {user.age}}
        <span v-for="(v,k,i) in user">
            {
       {k}}=={
       {v}}=={
       {i}}
        </span>
    </li>
    </div>
    
        <script src="./node_modules/vue/dist/vue.js"></script>
    
        <script>
            //1、vue声明式渲染
            let  vm=new Vue(
                {
                    el:"#app",
                    data:{
                        name:'zhangshuai',
                        num:10,
                        msg:"<h1>Hello  Vue</h1>",
                        link:"http://www.baidu.com",
                        language:[]
                    },
                    methods:{
                        cancel(){
                            this.num--;
                        },
                        hello(){
                            alert("点击了")
                        }
                    }
                }
            );
            //2、双向绑定
            //3、事件处理
            //v-xx:指令
            //1、创建vue实例，关联页面的模板，将自己的数据渲染到关联的模板，响应式的
            //2、指令来简化对dom的一些操作
            //3、声明方法来做更复杂的操作
    
            //插值表达式 有闪烁的问题
            
            //v-bind用于绑定数据和元素属性   v-bind:属性名    简写   :属性名  单项绑定
            //v-model双向绑定，常用于表单项
            //v-on 事件修饰符  按键修饰符
    
            /*
            遍历数组：
            v-for="item in items
            (item, index) in items
            遍历对象：
            value in object
            (value, name) in object
            (value, name, index) in object
            */
            let  vue1=new Vue({
                el:"#app2",
                data:{
                    users:[
                        {name:"name1",age:"21"},
                        {name:"name2",age:"22"},
                        {name:"name3",age:"23"},
                        {name:"name4",age:"24"}
                    ]
                }
    
            });
    
            //v-if和v-show的区别
            /*
            共同点：v-if 和 v-show 都能实现元素的显示隐藏
            区别：
            1. v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；
            2. v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多；
            3. v-if 有更高的切换开销，v-show 切换开销小；
            4. v-if 有配套的 v-else-if 和 v-else，而 v-show 没有
            5. v-if 可以搭配 template 使用，而 v-show 不行*/
            /*
                v-bind 缩写
                完整语法 
                <a v-bind:href="url">...</a>
                缩写 
                <a :href="url">...</a>
                ------------------------------------------------
                v-on 缩写
                完整语法 
                <a v-on:click="doSomething">...</a>
                 缩写 
                <a @click="doSomething">...</a>
            */
        </script>
    </body>
    </html>