学习VUE的第一周笔记

最新推荐文章于 2024-05-28 16:10:19 发布

GU-MU-C

最新推荐文章于 2024-05-28 16:10:19 发布

阅读量324

点赞数 6

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

本文链接：https://blog.csdn.net/g_xlike/article/details/136584038

版权

哈喽，大家好久不见，一个寒假过去了，新的学期开始了，那就开始我们新一轮的学习笔记吧。

vue—作者：尤雨溪

认识vue
Vue 是一套用来动态构建用户界面的渐进式 JavaScript 框架
构建用户界面:把数据通过某种办法变成用户界面
渐进式: Vue 可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的 vue 插件
vue的特点
遵循 MVVM 模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注 U，可以引入其它第三方库开发项目
采用组件化模式，提高代码复用率、且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM和Diff算法，尽量复用DOM节点。

使用vue

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

阻止 vue 在启动时生成生产提示 Vue.config.productionTip = false

以下代码为简单的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>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</html>

el：el绑定创建的容器
1.el:“容器名称，如id或class等”
2.Vue实例.$mount(“容器名称，如id或class等”)

// 注：$mount绑定方式一定放在实例最后

data： data用于定义变量的集合,通常与插值提供
1.data:{}对象式
2.data(){return{}}函数式

// 注：不要使用箭头函数,搭建脚手架（vue-cli）后，必须使用函数式

指令

指令语法
功能: 用于解析标签(包括: 标签属性、标签体内容、绑定事件…)

1.v-bind:绑定元素属性
举例:

 <a v-bind:href="xxx">或简写为 <a :href="xxx">

xxx 同样要写is 表达式，可以直接读取到 data 中的所有属性，注意，一定要用英文冒号。
2.v-on:事件类型或者@事件类型

<!--绑定事件   v-on:  ==  @
            v-on:事件类型   事件类型一定不要加on -->

3.列表渲染v-for 指令：用于展示列表数据

语法: <li v-for="(item, index) of items" :key="index">

这里key更好的可以是 index
是遍历对象的唯一标识
可遍历: 数组、对象、字符串 (用的少) 、指定次数 (用的少)

4.v-if v-else-if v-else条件渲染
写法跟 if else 语法类似

v-if="表达式"
V-else-if="表达式"
V-else

适用于: 切换频率较低的场景，因为不展示的 DOM 元素直接被移除
注意:

v-if 可以和 v-else-if
v-else 一起使用，但要求结构不能被打打断

5.v-show
写法:

v-show="表达式"

适用于: 切换频率较高的场景
特点: 不展示的 DOM 元素未被移除，仅仅是使用样式隐藏掉 display: none
备注: 使用 v-if 的时，元素可能无法获取到，而使用 v-show 一定可以获取到template
标签不影响结构，页面 html 中不会有此标签，但只能配合 v-if ，不能配合 v-show

这周暂时就到这了，宝子们再见！