Vue快速入门（el挂载点,data数据对象,指令集）

最新推荐文章于 2023-06-02 11:33:16 发布

不忘初心Eternity

最新推荐文章于 2023-06-02 11:33:16 发布

阅读量469

点赞数 1

分类专栏：前端学习文章标签： Vue 前端 html

本文链接：https://blog.csdn.net/qq_41216743/article/details/103213756

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近服创项目差一个前端，之前一直是负责后端逻辑处理，现在不得不在短时间内学一下，完成服创比赛。在bilibili找了Vue框架学习教程，包括了基础介绍及实际应用实践，感觉教程也还不错，现把学习内容做个简单总结：

一、Vue基础入门

1、入门一个框架最好的方式就是从官方文档开始，因为Vue框架是中国人写的，所以文档也是中文，看起来很舒适，不像其它框架的文档需要翻译。https://cn.vuejs.org/v2/guide/

2、第一个Vue程序

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue基础</title>
</head>

<body>
  <div id="app">
    {{ message }}
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:"#app",
      data:{
        message:" Hello world! "
      }
    })
  </script>
</body>

</html>

el挂载点：上面例子通过 div中绑定id选择器进行挂载，其中Vue实例范围div挂载下的元素，包括其内部的元素。同时，el挂载还可通过其它的选择器进行挂载，比如类挂载。

data：数据对象：Vue中的数据定义在data中，data中也可以写复杂类型的数据，渲染复杂数据时，遵守js的语法即可。

3.v-text指令：

作用：设置标签的内容（textContent）,默认写法会替换全部内容： <h2 v-text="message">张家界</h2>

使用差值表达式{{ }} 可以替换指定内容。 <h2>{{ message }}张家界</h2>

内部支持写表达式。 <h2 v-text="info+'!'">张家界</h2>

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-text指令</title>
</head>

<body>
    <div id="app">
        <h2 v-text="message">张家界</h2>
        <h2 v-text="info+'!'">张家界</h2>
        <h2>{{ message +'!'}}张家界</h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"创新创业工作室!!!",
                info:"努力学习知识"
            }
        })
    </script>
</body>

</html>

4、v-html指令

作用：

设置元素的innerHTML，

内容中有html的内容会被解析为标签，

而v-text指令无论内容是什么，只会被解析成文本

解析文本用v-text,解析html用v-html

5. v-on

作用：

为元素绑定事件

事件名不需要写on

指令可以简写成@

绑定的方法定义在methods

方法内部通过this关键字可以访问定义在data中的数据

6. v-show

作用：

根据真假切换元素的显示状态

原理是修改display,实现显示隐藏

指令后面的内容，最终都会解析为布尔值

值为true时，元素显示，值为false时，元素隐藏

数据改变之后，对应的显示状态会同步更新

7. v-if

作用：

根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true，元素存在于dom树中，为false，从dom树中移除

频繁的切换用v-show,反之使用v-if，前者的切换消费小

8. v-bind

作用：

为元素绑定属性

完整写法是v-bind:属性名

简写的话可以直接省略v-bind,只保留:属性名

需要动态的增删class建议使用对象的方式

9. v-for

作用：

v-for指令的作用是：根据数据生成列表结构

数组经常和v-for结合使用

语法是（item,index）in数据

item和index可以结合其他指令一起使用

数组长度的更新会同步到页面上，是响应式的

10. v-on补充

作用：

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上.修饰符可以对事件进行限制

.enter可以限制触发的按键为

11. v-model

作用：

便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据是双向传递的

后序补充……

不忘初心Eternity

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue快速入门（el挂载点,data数据对象,指令集）

最近服创项目差一个前端，之前一直是负责后端逻辑处理，现在不得不在短时间内学一下，完成服创比赛。在bilibili找了Vue框架学习教程，包括了基础介绍及实际应用实践，感觉教程也还不错，现把学习内容做个简单总结：一、Vue基础入门1、入门一个框架最好的方式就是从官方文档开始，因为Vue框架是中国人写的，所以文档也是中文，看起来很舒适，不像其它框架的文档需要翻译。https://cn.vue...
复制链接

扫一扫

专栏目录