Vue-入门（运行第一个vue，el挂载点，data数据对象）

最新推荐文章于 2022-10-30 23:55:57 发布

'Han'Zi

最新推荐文章于 2022-10-30 23:55:57 发布

阅读量123

点赞数 1

分类专栏：前端 # vue 文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/qq_52347540/article/details/120058260

版权

前端同时被 2 个专栏收录

59 篇文章 1 订阅

订阅专栏

vue

27 篇文章 1 订阅

订阅专栏

什么是Vue

Vue是一个js的框架
简化了我们DOM操作
具有响应式数据驱动

Vue如何的使用

首先要导入vue框架

<script src="../kj/vue.js"></script>//这里我的vue在kj/vue.js里面

在script标签中创建new Vue({
…
}
})

el挂载点

1.el用来设置vue管理元素的
2.vue会管理el选中的元素及其内部元素
3.推荐使用id选择器，也可以用其他选择器
4.只能作用于双标签【但html和body标签除外】

<body>
<div>
  {{message}}
  <p>{{message}}</p>
</div>

<script>
  new Vue({
    el:"div",
    data:{
      message:'Hello world',
    }
  })
</script>

那么被el选中的元素（包括子元素），就会执行下面的代码

data数据对象

1.用到的数据都存在data对象中
2.data中可以写复杂的数据（数据对象）
3.遵循js语法

<div id="div">
    <h1>
        {{ message }}
    </h1>
    <ol>
        <li>{{ pf[0] }}</li>
        <li>{{ st.name }}</li>
        <li>{{ st.qq }}</li>
    </ol>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            message:'xxxx大学',
            pf:["计算机","会计学"],
            st:{
                name:"cc",
                qq:"148546",
            }
        }
    })
</script>
</html>

注意数组和自定义类型的书写

'Han'Zi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-入门（运行第一个vue，el挂载点，data数据对象）

什么是VueVue是一个js的框架简化了我们DOM操作具有响应式数据驱动Vue如何的使用首先要导入vue框架<script src="../kj/vue.js"></script>//这里我的vue在kj/vue.js里面在script标签中创建new Vue({…}})el挂载点1.el用来设置vue管理元素的2.vue会管理el选中的元素及其内部元素3.推荐使用id选择器，也可以用其他选择器4.只能作用于双标签【但html和body标
复制链接

扫一扫