VUE学习笔记-2024年3月

yang_ll143527

已于 2024-05-16 16:29:59 修改

阅读量330

点赞数 4

文章标签：学习笔记

于 2024-03-21 14:27:30 首次发布

本文链接：https://blog.csdn.net/weixin_54097935/article/details/136907165

版权

VUE学习笔记-2024年3月

文档目录

来源：https://www.bilibili.com/video/BV1Zy4y1K7SH/?spm_id_from=333.337.search-card.all.click
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

1.vue核心

动态构建用户界面的渐进式JavaScript框架
1.1特点：
遵循MVVM模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注UI，可以引入其它第三方库开发项目

1.2与其他JS框架的关联
1.借鉴 Angular 的模板和数据绑定技术
2.借鉴 React 的组件化和虚拟DOM技术

1.3周边库
vue-cli：vue脚手架
vue-resource
axios
vue-router：路由
vuex：状态管理
element-ui：基于vue的UI组件库（PC端）

2.引入与容器

<!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>初识vue</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello！{{name}}!</h1>
    </div>

    <script>
        Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
        new Vue({
            el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data:{ //data用于存储数据，数据共el所指定的容器去使用
                name:'JOJO'
            }
        })
    </script>
</body>
</html>

效果
在这里插入图片描述

tips：

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

3.模板语句

<!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>vue模板语法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}!</h3>
        <hr>
        <h1>指令语法</h1>
        <a v-bind:href="url">快去看新番！</a><br>
        <a :href="url">快去看新番！</a>
    </div>

    <script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data:{ 
                name:'JOJO',
                url:'https://www.bilibili.com/'
            }
        })
    </script>
</body>
</html>

效果

总结
Vue模板语法包括两大类：

1.插值语法：

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

2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：<a v-bind:href="xxx">或简写为<a :href="xxx">，xxx同样要写js表达式，且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是v-???，此处我们只是拿v-bind举个例子

4.数据绑定

在这里插入代码片

yang_ll143527

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
VUE学习笔记-2024年3月

来源：https://www.bilibili.com/video/BV1Zy4y1K7SH/?2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值。2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。1.单向绑定（v-bind）：数据只能从data流向页面。element-ui：基于vue的UI组件库（PC端）1.双向绑定一般都应用在表单类元素上（如：、、等）vue-cli：vue脚手架。vue-router：路由。
复制链接

扫一扫