vue学习(5)

简介: vue学习(5)
<!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>el和data的两种写法</title>
</head>

<body>
    <div id="root">
        <h1>你好,{
   
   {
   
   name}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        Vue.config.procuctionTip = false;
        const vm = new Vue({
   
   
            // el: '#root',第一种写法
            // data的第一种写法:对象式
            // data: {
   
   
            //     name: '小阿牛'
            // }
            //data的第二种写法:函数式
            data () {
   
   
                console.log(this);
                //该方法是vue调用,此处的this是vue实例对象,如果写成箭头函数,则this指向window.
                return {
   
    name: '小阿牛' }
            }
        });
        console.log(vm);
        vm.$mount('#root');//第二种写法
    </script>
</body>

</html>

知识点
el和data的两种写法:
1:el的两种写法:
(1):可以在new Vue创建vue实例的时候,指定el属性的值。
(2):可以在创建vue实例之后,通过vm.$mount('#root')指定el的值。
2:data的两种写法:
(1):写成对象的形式;
(2):写成函数的形式;使用组件的时候,需要写成函数形式。
注意:由vue管理的函数一定不要写成箭头函数,否则,this指向的就不是vue实例了。

打印一下vue的实例,以$开头的都是开发者可以使用的。
image.png

目录
相关文章
|
5天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
4天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
|
4天前
|
JavaScript 前端开发 IDE
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5:用Vue的事件监听 实现数据更新的实时视图显示
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
Vue学习笔记4:用reactive() 实现数据更新的实时视图显示
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
12 4
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
13 4
|
4天前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
9 2
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
|
4天前
|
JavaScript
vue 函数化组件
vue 函数化组件
下一篇
无影云桌面