Vue基础与常见指令

Jinx_baobao

已于 2022-03-22 09:36:42 修改

阅读量941

点赞数 2

文章标签： vue 前端

于 2022-03-21 20:31:12 首次发布

本文链接：https://blog.csdn.net/Jinx_baobao/article/details/123642296

版权

2.2 解析文本 v-text、v-html

3.4 self只有当事件在本身时才会触发回调，不影响冒泡

3.5 once 事件只触发一次

3.6 支持多个事件修饰符

四、Vue中样式的使用

1、Vue简介

1.1 什么是Vue

Vue 是一种用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.2 Vue的特点是什么

1、组件化，清晰的文档结构

2、声明渲染，数据渲染视图（页面）

<body>
    <!-- 写视图层，我们要展示的内容 -->
    <div id="app">
        展示区域
        <!-- 插值表达式 {
  {}}-->
        {
  {msg}}
        {
  {num * 2 + 3}}
    </div>
</body>
<script>
    var app = new Vue(
        {
            // 控制区域
            el:"#app",
            // 数据
            data:{
                msg:"hello word22!",
                num:100
            },
            methods: {
            },
        }
    )
</script>

1.3 Vue结构：

（1）：首先引入vue.js。
（2）：写视图层，我们需要展示的内容(插值表达式：{ {插入内容}})。
（3）：创建实例化对象Vue，第一个属性是控制区域：el：（“#id”），第二个属性是数据： data：{存放我们的数据}，第三个属性是methods：{放我们的方法}
（注意：都是通过this对象去拿的，通过this也可以调用方法。写方法的时候我们需要注意this的指向问题。）

2、Vue的常用指令

2.1 v-cloak

在我们加载Vue之前v-cloak是存在的，Vue加载结束后v-cloak就隐藏了，利用这个特性可以实现：页面防止闪烁

2.2 解析文本 v-text、v-html

v-text和v-html都可以进行文本的解析，他们的区别是：

v-html可以转义标签和渲染数据，v-text不能转义标签只能渲染数据

v-html 示例

<!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="../vue-2.4.0.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <div v-cloak>{
  {msg}}</div>
        <div>{
  {html}}</div>
        <!-- v-html 能够解析富文本  会覆盖原来的内容   -->
        <div v-html="html"> 12312312312</div>
        
    </div>
</body>

</html>
<script>
    const vm = new Vue({
        el:'#box',
        data: {
            msg:'Heavens official blessings, no taboos',

            html:'<h1>hhh</h1>',
        },
        methods: {

        },
    })
</script>

v-text 示例

<!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="../vue-2.4.0.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <div v-cloak>{
  {msg}}</div>
        <div>{
  {text}}</div>
        <div v-text="html"></div>
    </div>
</body>

</html>
<script>
    const vm = new Vue({
        el:'#box',
        data: {
            msg:'Heavens official blessings, no taboos',
            text:'<h1>hhh</h1>',
        },
        methods: {

        },
    })
</script>

最低0.47元/天解锁文章

Jinx_baobao

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue基础与常见指令

1、Vue简介1.1 什么是VueVue 是一种用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。1.2 Vue的特点是什么1、组件化，清晰的文档结构2、声明渲染，数据渲染视图（页面）<body> <!-- 写视图层，我们要展示的内容 --&
复制链接

扫一扫