前端Vue2笔记第一章

最新推荐文章于 2024-09-07 14:37:16 发布

2401_86231334

最新推荐文章于 2024-09-07 14:37:16 发布

阅读量661

点赞数 19

文章标签：前端笔记

本文链接：https://blog.csdn.net/2401_86231334/article/details/141186534

版权

一、简介

易学易用：基于标准HTML、CSS和JavaScript构建，提供容易上手的API和一流的文档

性能出色：经过编译器优化、完全响应式的渲染系统、几乎不需要手动优化

灵活多变：丰富的、可渐进式集成的生态系统、可以根据应用规模再库和框架间切换自如 Vue是一个框架，也是一个生态、其功能覆盖了大部分前端开发常见的需求，但Web世界是十分多样化的，不同的开发者在Web上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue的设计非常注重灵活性和“可以被逐步集成”这个特点，根据你的需求场景，你可以用不同的方式使用Vue。

二、开发者

尤雨溪

2013年受到Angular框架的启发，尤雨溪开发出了一款轻量框架 --- Seed。同年12月，Seed更名未Vue，版本号 0.6.0 2014年 Vue正式对外发布，版本号 0.8.0 Taylor otwell 在 Twitter 上发表动态，说自己正在学习 Vue 2015年 10月27日，正式发布Vue1.0.0 Evangelion (新世纪福音战士) 2016年 10月1日，正式发布Vue2.0.0 Ghost in the Shell (攻壳机动队) 2020年 9月18日，正式发布Vue3.0.0 One Piece(海贼王)

三、Vue特点 1. 采用组件化模式，提供代码复用率，且让代码更好维护 2. 声明式编码，让编码人员无需直接操作Dom，提供开发效率 3. 使用虚拟Dom+优秀的Diff算法，尽量复用Dom节点。

四、学习Vue之前要掌握的JavaScript基础知识 1. ES6语法规范 2. ES6模块化 3. 包管理器 4. 原型、原型链 5. 数组常用方法 6. axios 7. promise 8. ....

1.1、测试Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引用Vue -->
    <script src="../js/vue.js" ></script>
</head>
<body>
</body>
</html>

运行页面后会遇到以下俩问题：问题1：下载Vue DevTools扩展以获得更好的开发体验： 1. 需要下载一个插件 vue_dev_tools.crx 2. 下载 - 前提需要能够正常访问谷歌商店 - 启动VPN进行访问3. 进入GitHub。

问题2：正在以开发模式运行Vue。在部署生产时，一定要打开生产模式 5. 在部署的时候需要更换一下Vue的文件，vue.min.js 6. 通过代码进行关闭。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引用Vue -->
    <script src="../js/vue.js" ></script>
</head>
<body>
<script>
    Vue.config.productionTip = false;
</script>
</body>
</html>

2、Vue应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引用Vue -->
    <script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
 <!--准备一个容器-->
    <div id="main">
       <h1>Hello {{name}}</h1>
    </div>
    <script>
        //阻止，Vue启动时提示的产生
        Vue.config.productionTip = false;
new Vue({
            el: '#main', //el用于指定当前Vue的实例为哪个容器，值通常为CSS的选择器字符串
            //通常用户存储数据，数据供el所指定的容器使用
            data: {
                name: '筱筱'
           }
       })
    </script>
</body>
</html>

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

六、Vue核心 1、模板语法 Vue模板语法有两大类： 1. 插值语法： 1. 功能：用于解析标签体内容 2. 写法：{{xxx}}，xxx是JS表达式，且可以直接读取到data中的所有属性 2. 指令语法： 1. 功能：用于解析标签(包括：标签属性、标签体内容、绑定事件....) 2. 举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写JS表达式，且可以直接读取到 data中所有的属性 3. 备注：Vue中有很多指令，形式都是： v-????。当前知识拿v-bind举例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <!-- 引用Vue -->
    <script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<div id="main">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <h1>指令语法</h1>
    <a href="http://www.netbox.net.cn/">点我去学习1</a>
    <br>
 <a v-bind:href="url">点我去学习2</a>
</div>
<script>
    //阻止，Vue启动时提示的产生
    Vue.config.productionTip = false;
    //创建Vue实例
    new Vue({
        el: '#main', //el用于指定当前Vue的实例为哪个容器，值通常为CSS的选择器字符串
        //通常用户存储数据，数据供el所指定的容器使用
        data: {
            name: '筱筱',
            url: "https://www.baidu.com/"
       }
   })
</script>
</body>
</html>

2、数据绑定 Vue中有两种数据绑定方式 1. 单向绑定(v-bind)：数据只能从data流向页面 2. 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data 1. 双向绑定一般都应用在表单类元素上 2. v-model：value可以简写为 v-model，因为v-model默认收集的就是value值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <!-- 引用Vue -->
    <script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<div id="main">
    <form action="">
        <label>单向数据绑定：</label>
        <input type="text" v-bind:value="name">
        <br>
        <label>双向数据绑定：</label>
        <input type="text" v-model:value="name">
    </form>
</div>
<script>
    //阻止，Vue启动时提示的产生
    Vue.config.productionTip = false;
//创建Vue实例
    new Vue({
 el: '#main', //el用于指定当前Vue的实例为哪个容器，值通常为CSS的选择器字符串
        //通常用户存储数据，数据供el所指定的容器使用
        data: {
            name: '筱筱',
       }
   })
</script>
</body>
</html>

3、el与data两种写法 1. el有两种写法 1. new Vue()时候配置el属性 2. 先创建Vue实例，然后再通过v.$mount('#main')执行el的值 2. data有两种写法 1. 对象式 2. 函数式 3. 如何体现：目前使用哪种写法都可以，后续到组件时，data必须使用函数式，否则会报错 3. 重要性原则 1. 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再式Vue实例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el与data两种写法</title>
    <!-- 引用Vue -->
    <script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
    <div id="main">
        <h3>你好，{{name}}</h3>
    </div>
<script>
    //阻止，Vue启动时提示的产生
    Vue.config.productionTip = false;
    //创建Vue实例
    const v = new Vue({
        //方式一
        // el: '#main', //el用于指定当前Vue的实例为哪个容器，值通常为CSS的选择器字符串
        //通常用户存储数据，数据供el所指定的容器使用
        //方式一：对象式
        // data: {
        //     name: '筱筱',
        // }
        //方式二：函数式
        data(){
            console.log("data:",this)
            return{
                name : '筱筱'
}
   })
    //方式二
    //mount 挂载 --- 可灵活性运行
    v.$mount('#main')
    console.log("V",v)
</script>
</body>
</html>

4、MVVM模型 1. M：模型(Model)对应data中的而数据 2. V：视图(View)模板 3. VM：视图模型(ViewModel)Vue实例对象 data中所有的属性，最后都出现在 vm 身上 vm身上的所有属性，及 Vue原型上所有属性，在Vue模板都可以直接使用。

5.3、Vue中的数据代理 1. Vue中的数据代理 1. 通过vm对象来代理data对象中的属性操作 2. Vue中的数据代理的好处 1. 更加方便的操作data中的数据 3. 基本原理 1. 通过Object.defineProperty()把data对象中所有属性添加到vm上 2. 为每一个添加到vm上的属性，都指定一个 getter/setter 3. 在 getter/setter 内部去操作，data中对应的属性。

2401_86231334

关注

19
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端Vue2笔记第一章

六、Vue核心 1、模板语法 Vue模板语法有两大类： 1. 插值语法： 1. 功能：用于解析标签体内容 2. 写法：{{xxx}}，xxx是JS表达式，且可以直接读取到data中的所有属性 2. 指令语法： 1. 功能：用于解析标签(包括：标签属性、标签体内容、绑定事件....) 2. 举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写JS表达式，且可以直接读取到 data中所有的属性 3. 备注：Vue中有很多指令，形式都是： v-?
复制链接

扫一扫