【Vue2.0学习】—el与data的两种写法(三十六)

简介: 【Vue2.0学习】—el与data的两种写法(三十六)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="root">
        <h3>好好学习,{{name}}</h3>
    </div>
    <script>
        const m = new Vue({
            //data的第一种写法:对象式
            // data: {
            //     name: 'YY'
            // }
            //对象的第二种写法:函数式
            data() {
                console.log('@@@', this);
                return {
                    name: 'Li'
                }
            }
        })
        m.$mount('#root')
    </script>
</body>
</html>


相关文章
|
6月前
|
JavaScript
Vue中el与data的两种写法
Vue中el与data的两种写法
|
3月前
|
JavaScript 前端开发 算法
【Vue面试题三】、Vue中的v-show 和 v-if 怎么理解 ?
这篇文章讨论了Vue中的`v-show`和`v-if`指令的区别和使用场景。文章指出`v-show`和`v-if`都能控制元素在页面上的显示,但它们在控制手段、编译过程和条件上有所不同。`v-show`通过改变CSS的`display`属性来隐藏或显示元素,而`v-if`则是通过添加或删除DOM元素来实现条件渲染。`v-if`在切换时会涉及到局部编译/卸载过程,而`v-show`则只是基于CSS的简单切换。文章还分析了两者的性能消耗,指出`v-if`有更高的切换消耗,而`v-show`有更高的初始渲染消耗。最后,文章建议根据条件的变化频率来选择使用`v-show`或`v-if`。
【Vue面试题三】、Vue中的v-show 和 v-if 怎么理解 ?
|
3月前
|
JavaScript 前端开发
Vue学习之--------el与data的两种写法、MVVM模型、数据代理(2022/7/5)
这篇文章详细介绍了Vue中`el`和`data`的两种写法,解释了MVVM(Model-View-ViewModel)模型的基础知识,并探讨了数据代理的概念。文章通过代码实例和页面效果展示了这些概念的应用,还回顾了`Object.defineProperty`方法,并解释了Vue中如何实现数据代理。
Vue学习之--------el与data的两种写法、MVVM模型、数据代理(2022/7/5)
|
4月前
|
JavaScript
Vue中data常见的写法:
Vue中data常见的写法:
|
6月前
|
JavaScript JSON 资源调度
Vue3——基础内容部分(小满版本)(一)
Vue3——基础内容部分(小满版本)
76 0
|
6月前
|
缓存 JavaScript 开发者
Vue3——基础内容部分(小满版本)(三)
Vue3——基础内容部分(小满版本)
64 0
|
6月前
|
JavaScript 算法 前端开发
Vue3——基础内容部分(小满版本)(二)
Vue3——基础内容部分(小满版本)
84 0
|
6月前
|
缓存 JavaScript 前端开发
Vue3——基础内容部分(小满版本)(四)
Vue3——基础内容部分(小满版本)
115 0
|
11月前
【Vue2.0学习】—class与style绑定(三十八)
【Vue2.0学习】—class与style绑定(三十八)
|
6月前
|
JavaScript
【Vue2.0学习】—ref属性(五十三)
【Vue2.0学习】—ref属性(五十三)