Vue基本使用

上代码：

    
    
    

    
    



    
    

        {{message}} //第一种渲染方式{{}}:模板语法,两个花括号,可以将data中的数据直接做渲染.模板中只能有变量或者表达式,不能有语句.

        
        {{message.split(" ").reverse().join('')}}
        
姓名:{{user.username+'是我'}}

        
性别:{{user.gender}}
        
{{desc}}
//默认将标签看成字符串

        
//渲染到标签里的地址
        
{{desc}}
//v-html为指令,后面加上对应的值,作用为将指定的变量以HTML的形式渲染出来
        
//渲染到属性里的地址 :/ v-bind:   不这样设置标签属性会默认把后面的变量当成字符串常量,加上冒号属性就会将""中的内容作为变量去读

        百度
        
        


    

    


        
        
count的值为: {{count}}
        
        +1
        +1 
        


        
        Reverse Flag!
        
        
请求成功 --- 被 v-if 控制
        
还没有成功捏
        

        
请求成功 --- 被 v-show 控制
        
        
        如果该标签会经常切换显示/不显示,则建议使用v-show,只是增删属性效果,性能更高!不过v-if还有v-else!


    

    

        
        

            
            
索引:{{i}},姓名:{{user.name}}
            
        

        
        
        
        
        
        添加
        

            
姓名：{{user.name}}
            
            
            
            
        

    


    
    

其实抽象来看就是三个部分：首先在模块中导入vue的脚本文件，然后声明data（Model）和 id属性（View），然后通过Vue.createApp(data).mount(id)让二者连接，形成页面。

---

各模块分析

    
    

        {{message}} //第一种渲染方式{{}}:模板语法,两个花括号,可以将data中的数据直接做渲染.模板中只能有变量或者表达式,不能有语句.

        
        {{message.split(" ").reverse().join('')}}
        
姓名:{{user.username+'是我'}}

        
性别:{{user.gender}}
        
{{desc}}
//默认将标签看成字符串

        
//渲染到标签里的地址
        
{{desc}}
//v-html为指令,后面加上对应的值,作用为将指定的变量以HTML的形式渲染出来
        
//渲染到属性里的地址 :/ v-bind:   不这样设置标签属性会默认把后面的变量当成字符串常量,加上冒号属性就会将""中的内容作为变量去读

        百度
        
        

    

    
        Vue.createApp({
          data:function() {
            return {  
                //{}中为对象
                user:{                
                    username:'zhangsan',
                    gender:'M',
                },
                desc:'百度',
                message:'Hello vue!',
                link:"http://www.baidu.com",
                //文本框的占位符内容
                inputValue:'请输入内容',
                imgSrc:'./images/demo.png',
                w:'500px',
            }
          }
        }).mount('#app')
    

第一种渲染方式：{{ }}模板语法,两个花括号，可以将data中的数据直接做渲染。模板中只能有变量或者表达式，不能有语句。

---

    


        
        
count的值为: {{count}}
        
        +1
        +1 
        


        
        Reverse Flag!
        
        
请求成功 --- 被 v-if 控制
        
还没有成功捏
        

        
请求成功 --- 被 v-show 控制
        
        
        如果该标签会经常切换显示/不显示,则建议使用v-show,只是增删属性效果,性能更高!不过v-if还有v-else!

    

        Vue.createApp({
            data:function(){ //数据
                return{
                    count:0,
                    flag:false,
                }
            },
            methods:{  //自定义方法
                addCount(){
                    this.count+=1
                },
            }
        }).mount('#app0')

重点在于：v-if v-else，这是切换时常用的标签属性。

   

        
        

            
            
索引:{{i}},姓名:{{user.name}}
            
        

        
        
        
        
        
        添加
        

            
姓名：{{user.name}}
            
            
            
            
        

    

        Vue.createApp({
            data:function(){ //数据:后面都是后端传过来的数据,即实现前后端的联调
                return{
                    //用户列表
                    userList:[
                        {id:1,name:'zhangsan'},
                        {id:2,name:'lisi'},
                    ],
                    num:Math.random(),//生成1以内的随机数
                    //输入的用户名
                    name:'',
                    //下一个用户可用的id值
                    nextId:3,
                }
            },
            methods:{  //自定义方法，给数组的起始位置添加元素unshift
                addNewUser(){
                    this.userList.unshift({id:this.nextId,name:this.name})
                    //这个name大有文章，它是在输入框input中的v-model属性值。也就是说，它是一种更好的同步动态的value值，也就是输入框中的值
                    //每次添加user时如果不将this.name置空，那么添加完之后name不变，输入框中仍旧显示上一个添加的姓名，不会刷新，不方便每次从头开始写
                    this.name=''
                    this.nextId++
                },
            }
        }).mount('#app1')

重点是addNewUser方法的思想，每次提交后，姓名都清空，便于后续重新输入。