Vue中模板语法与el 和 data 的两种写法

最新推荐文章于 2024-06-01 16:31:18 发布

BoyBoy!

最新推荐文章于 2024-06-01 16:31:18 发布

阅读量150

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/yyds12300/article/details/134267791

版权

模板语法

标签语法

//在.html文件中
<body>
    <h3>
        {{name}}
    </h3>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            url:'网页地址'
        }
    })
</script>

指令语法
标签语法和指令语法的简单区分，就是指令语法用v-on,v-bind,v-model指令进行动态绑定。

//在.html文件中
<body>
    //点位这个词的位置为标签体
    <a :href="url">点位</a>
    // <a :href="url.toUpperCase()"></a>
    // <a :href="url.Date.now()"></a>
    // toUpperCase()让网页字母大写
    // Date.now()获取当前的时间戳
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            url:'网页地址'，
            //避免name重名可以设计多层，school.name于name
            school: {
            name: 'marray'
            }
        }
    })
</script>

数据绑定

v-bind可以简写成冒号，只能从data流向页面。而v-model不仅可以从data流向页面，也可以页面刘翔data

//单项数据绑定
<input type="text" v-bind:value = "name" ><br>
//双向数据绑定
<input type="text" v-model:value = "name" ><br>

v-model只能应用于表单类元素，如：input、select
v-model：value可以简写成v-model.v-model默认就是value值

el 和 data 的两种写法

el的第一种写法，data的第一种写法

<script>
    const v = new Vue({
    el:'#root',
    data: {
    name: '蜜瓜'
    }
})
</script>

el的第二种写法，data的第二种写法
data的第一种写法不用在vue中。

<script>
const v = new Vue({
   // el:'#root',
   //此处的function()不可用箭头函数（=>）代替，因为箭头函数所指示的是window。也就是，this不是vue实例对象了
    data:function(){
        //data中的this是vue实例对象，vue中提供自身运行的文件与带$号，程序员用的文件
        console.log(this)
        return{
        name: '米国'
        }
    }
})
console.log(v)
setTimeout(()=>{
    //$mount为挂载的意思，1000延迟显示1秒钟.此处为el的第二种写法。
    v.$mount('#root'),1000
})
</script>

MVVM模型
mvvm模型是vue作者参考后，创建的Vue
M：模型，对应data的数据
V: 视图，模板，对应DOM页面
VM: 视图模型，对应Vue实例对象
在Vue中V通过VM与M进行双向绑定，M的数据改变V的数据也进行改变
MVVM代码对应如下

<body>
    // div包裹的代码为V视图
    <div>
    <h1>{{name}}</h1>
    </div>    
</body>

<script>
    //new Vue为VM视图模型
  const vm = new Vue({
       el: '#root',
    //data对象包裹的区域为M模型，
       data: {
           name: '小米',
        }
   })                                                
</script>