Vue学习笔记之01-Vue的特点

最新推荐文章于 2023-06-14 16:01:22 发布

风高物燥

最新推荐文章于 2023-06-14 16:01:22 发布

阅读量220

点赞数 1

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/AshesO/article/details/109534719

版权

Vue学习笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

Vue基础

0.准备工作

下载vue 可以通过cdn引入vue 也可以下载vue.js本地引入
vue的基本使用
- 在引入vue后 new Vue({}) 一个vue对象
- 这样操作是为了防止XSS,csrf的攻击
- 然后就可以在html中进行vue操作了例如
- 例如

    new Vue({
        el : '#box', //此处写需要进行vue渲染的元素
        data : {
            // 此处写变量
            myname : 'xiaoLam'
        }
    })

    <div id='box'>
        {{20+30}} // 输出50
        {{myname}} // 输出xiaoLam
    </div>

以前的js做法 (编程范式: 命令式编程)

创建一个div元素,设置id属性
定义一个变量message
将这个变量插入div元素中
如果修改了message的数据
就要重新将修改后的数据重新插入div

1.模板语法 (编程范式: 声明式编程) 优点是数据处理和页面渲染分开管理可以很方便地动态响应数据的改变

(1) 插值
+ 文本插值 {{}}
- 在页面中插入文本的时候需要将想插入的文本方法双层大括号中
+ 插入html标签 (处于安全考虑,只插入信任的内容)
- 在需要插入html标签的元素中添加 v-html属性(其实叫指令) 值为要插入的键, 例如

new Vue({
        el : '#box', //此处写需要将vue对象挂载到哪一个元素
        data : {
            // 此处写变量 自己定义的属性 也可以是来自网络的数据 网络的数据改变的话, 页面显示的数据动态改变(这个就是响应式的优点)
            myname : 'xiaoLam',
            myhtml: '<h1>你好你好</h1>'
        }
    })

<div id='box'>
    {{20+30}} // 输出50
    {{myname}} // 输出xiaoLam
    <div v-html='myhtml'></div> // 输出渲染后的myhtml
</div>

(2) 指令: 是带有v- 前缀的特殊属性
- v-html 插入标签
- v-show 判断是否显示节点值为布尔值 true表示显示 flase表示隐藏
- v-if 判断是否创建节点值为布尔值 true表示创建 flase表示不创建

2. class和style

(1) 绑定HTML class
+ 动态绑定class有三种写法
- 三目运算符写法
- 对象写法
- 数组写法

var vm = new Vue({
            el: "#box",
            data: {
                isActive: true,
                classObj: {
                    a: true,
                    b: true
                    // a, b 为class的名字
                    // 对象写法有一个缺点就是不能在没有定义之前创建class
                    // 就比如classObj没有定义 c 这个class 那么就不能动态地创建 c 这个class
                },
                classArr: ["a", "b"] // 要操作数组中的元素也是按照JS的语法来操作

            }
        })

        <div :class="isActive?'red':'blue'">动态绑定class 三目运算符写法</div>
        <div :class="classObj">动态绑定class 对象写法</div>
        <div :class="classArr">动态绑定class 数组写法</div>

(2) 动态绑定style 跟动态绑定class差不多
(3) 想要绑定事件就Vue对象中的methods中编写

var vm = new Vue({
            el: "#box",
            data: {
                // 添加变量
            },
            methods: {
                // 添加方法
                handleClick() {
                    this.isActive = !this.isActive;
                }
            }
        })

v-for 指令

可以遍历数组中的元素
实际上就是JS中的for-in循环例如:

<div id="box">
    <ul>
        <li v-for="item in movies">{{item}}</li>  // 这里就可以循环movies数组中的元素 是响应式的,会自动检测movies中的数据, 增删改都会实时更新
    </ul>
</div>

const app = new Vue({
    el: "#box",
    data: {
        movies: ["肖申克的救赎", "少年派", "星际穿越"]
    }
})

v-on 添加事件监听指令语法糖 @

用于给元素添加事件监听
具体用法
- 给需要的添加的元素添加属性 v-on:事件类型=“触发的函数名称”
- 在Vue对象中的methods中编写对应函数

<button v-on:click="sub">-</button>
<button v-on:click="add">+</button>

const app = new Vue({
    el: "#box",
    data: {
        counter: 0
    },
    methods: {
        add: function () {
            this.counter++; // 注意要获取data中的变量 需要写this. 否则Vue会在html中查找该名字的元素
            console.log("add被触发了")
        },
        sub: function () {
            this.counter--;
            console.log("sub被触发了");
        }
    }
})

VUE中的MVVM (model view viewModel)

view层
- 视图层
- 在前端开发中, 通常就是DOM层
- 主要作用就是给用户展示各种信息
Model层
- 数据层
- 可以是自己写的固定数据, 可以是从服务器端请求下来的动态数据
- 如果是动态数据在VUE中就可以通过ViewModel实时刷新数据
viewModel层
- 视图模型层
- 是view 和 model 之间沟通的桥梁
- 一方面实现了Data Binding(数据绑定), 将Model的改变实时地反映在View中
- 另一方面实现了 DOM listener (DOM监听), 当DOM触发事件的时候, 可以改变对应的Data