el和data的两种写法

最新推荐文章于 2024-08-06 20:15:12 发布

Ciao。

最新推荐文章于 2024-08-06 20:15:12 发布

阅读量259

点赞数

分类专栏： vue2学习文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Alive_m/article/details/126336518

版权

vue2学习专栏收录该内容

13 篇文章

订阅专栏

1.MVM模型

M：模型（Model）：data中的数据
V：视图（View）：模板代
VM：视图模型：Vue实例

注意：

1.data中的所有属性，最后后都出现在VM身上

2.vm身上所有的属性及vue原型上所有的属性，在vue模板中都可以直接使用

MVVM

MVVM 本质上是 MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。

模型model指的是后端传递的数据，视图view指的是所看到的页面。

视图模型viewModel是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：

将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是**：数据绑定**
将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听

这两个方向都实现的，我们称之为数据的双向绑定

2.el的两种写法

(1) new Vue时候配置el属性。

const v = new Vue({
    el: "#root",//第一种写法
    data: {
        name: '陌生人'
    }
})

(2) 先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值。

const v = new Vue({
    data: {
        name: '陌生人'
    }
})
v.$mount("#root")//第二种写法，需要先创建vue实例

3.data的两种写法

不能写箭头函数，箭头函数的this指向不是vue实例,学习组件时，data必须使用函数式，负责会报错

（1）对象式

data: {
    name: '陌生人'
}

（2）函数式

//data的第二种写法：函数式  :function可简写
data(){
    console.log('@@@',this)//此处的this是指vue实例对象
    return{
        name1:"陌生人"
    }
}

完整案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.el和data的两种写法</title>
    <!--    引入vue-->
    <script type="text/javascript" src="/excise/src/vue2.0/daima/js/vue.js"></script>
</head>
<body>
<!--
MVM模型
1.M：模型（Model）：data中的数据
2.V：视图（View）：模板代码
3.VM：视图模型：Vue实例
注意：
1.data中的所有属性，最后后都出现在VM身上
2.vm身上所有的属性及vue原型上所有的属性，在vue模板中都可以直接使用

-->
<!--准备一个容器-->
<div id="root">
<h1>你好，{{name1}}</h1>
<!--  测试 -->
<h1>你好，{{$options}}</h1>
<h1>你好，1:{{1+1}}</h1>
<h1>你好，{{_c}}</h1>

</div>

<script type="text/javascript">
    Vue.config.productionTip=false //阻止vue在启动时生成提示

   /* //el的两种写法
    const v = new Vue({
        //el: "#root",//第一种写法
        data: {
            name: '陌生人'
        }
    })
    v.$mount("#root")//第二种写法，需要先创建vue实例

*/

    /**
     * data的两种写法
     * 不能写箭头函数，箭头函数的this指向不是vue实例
     * 学习组件时，data必须使用函数式，负责会报错
     */
    new Vue({
        el: "#root",//第一种写法
        //data的第一种写法：对象式
       /* data: {
            name: '陌生人'
        }*/

        //data的第二种写法：函数式  :function可简写
        data(){
            console.log('@@@',this)//此处的this是指vue实例对象
            return{
                name1:"陌生人"
            }
        }
    })
</script>
</body>
</html>