【Vue2学习笔记】基础（持续更新）

最新推荐文章于 2024-08-12 23:09:11 发布

m0_63634307

最新推荐文章于 2024-08-12 23:09:11 发布

阅读量720

点赞数 21

文章标签：学习笔记 vue.js 前端

本文链接：https://blog.csdn.net/m0_63634307/article/details/141139054

版权

一、vue介绍

什么是vue？

Vue 是一套用于构建用户界面的渐进式框架。
Vue被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层。

vue特点

1.采用组件式开发，提高代码复用率，且让代码更高维护
2.声明式编码，让编码人员无需dom操作，提高开发效率
3.使用虚拟机dom和优秀的diff算法，尽量复用节点

第一个vue

编写步骤

1.从官网引入vue.js文件
网站链接：https://v2.cn.vuejs.org/v2/guide/installation.html
2.定义一个div
3.创建一个new Vue()实例化Vue应用程序
（1）el选项:元素element缩写，指定被 Vue 管理的Dom 节点入口(值为选择器),必须是一个普通的HTML标签节点,
（2）data选项:指定初始化数据,在Vue 所管理的 Dom 节点下,可通过模板语法来进行使用
4. 标签体显示数据:{{xxxxx}}
5. 表单元素双向数据绑定:v-model
6. 注意:el的值不能为 html 或 body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/day1/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- {{}} 用于标签体内显示数据 -->
        <p>{{msg}}</p>
        <p>{{Date.now()}}</p>
        <!-- v-model 进行数据的双向绑定 -->
        <input type="text" v-model="msg">
    </div>
    <script>
        // 创建一个vue实例
        new Vue({
            el: '#root',//指定被vue管理的入口，值为选择器 不可以是body或者html
            data: {//用于初始化数据 在vue实例管理的dom节点下 可以通过模板请求来引用
                msg: 'hello world',
                p:555
            }
        })
    </script>
</body>
</html>

使用vue注意事项

1.使用vue时，必须创建一个vue实例，并且要传入配置对象
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法
3.root容器里的代码被称为 vue模板
4.vue容器和实例是一一对应的，且容器里会自动读取到data中的所有属性
5.真实开发中只有一个vue实例
6.{{xxx}}中的xxx要写js表达式
7.一旦data中的数据发生改变，那么模板中用到该数据的地方会自动更新

MVVM模型

什么是MVVM模型？

MVVM是 Model-View-ViewModel 的缩写,它是一种软件架构风格
Model:模型,数据对象(data当中的数据)
View:视图,代码模板页面(用于渲染数据)
ViewModel:视图模型,其实本质上就是 Vue 实例

实际操作：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/day1/vue.js"></script>
</head>
<body>
    <div id="root">
        {{name}}
        {{$createElement}}
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: 'xihua',
                sex: 'nan'
            }
        })
        console.log(vm);
    </script>
</body>
</html>

结果图：
在这里插入图片描述

1.data中所有的属性最后都出现在vm身上
2.vm身上所有的属性 vue原型上的所有属性在vue模板里都可以直接使用

模版语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

1.插值语法

 功能：用于拆解标签体的内容
 写法：{{xxx}}，xxx是js表达式，而且可以直接读取到data中所有的属性

案例源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/day1/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>1.插值语法</h1>
        <h3>{{name}}，真好看</h3>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                name: '小花',
            }
        })
    </script>
</body>
</html>

效果图：
在这里插入图片描述

2.指令语法

通过once指令，能执行一次性的插值，当数据发生改变时插值处的内容不会更新

案例源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/day1/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>2.指令语法</h1>
        <span v-once>{{message}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                message: '一切正常',
            }
        })
    </script>
</body>
</html>

效果图：
请添加图片描述

m0_63634307

关注

21
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
【Vue2学习笔记】基础（持续更新）

MVVM是 Model-View-ViewModel 的缩写,它是一种软件架构风格Model:模型,数据对象(data当中的数据View:视图代码模板页面(用于渲染数据)ViewModel:视图模型,其实本质上就是Vue 实例</</</</constnewVueel'#root'dataname'xihua'sex'nan'log;
复制链接

扫一扫