vue基础知识总结

最新推荐文章于 2023-11-26 20:22:27 发布
最新推荐文章于 2023-11-26 20:22:27 发布
阅读量187 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43742526/article/details/107673597
版权

一、什么是vue?

在为 AngularJS 工作之后，Vue 的作者尤雨溪开发出了这一框架。他声称自己的思路是提取 Angular 中为自己所喜欢的部分，构建出一款相当轻量的框架。Vue 最早发布于 2014 年 2 月。作者在 Hacker News、Echo JS 与 Reddit 的 javascript 版块发布了最早的版本。一天之内，Vue 就登上了这三个网站的首页。Vue 是 Github 上最受欢迎的开源项目之一。同时，在 JavaScript 框架/函数库中，Vue 所获得的星标数已超过 React，并高于 Backbone.js、Angular 2、jQuery 等项目。 Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。

二、vue版Hello World

<!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>
    <!-- id标识vue作用的范围 -->
    <div id="app">
        <!-- {{}} 插值表达式，声明式渲染，绑定vue中的data数据 -->
        {{ message }}
    </div>
    <script src="vue.min.js"></script>
    <script>
        // 创建一个vue对象
        new Vue({
            //绑定vue作用的范围
            el: '#app',
            //定义页面中显示的模型数据
            data: {
                message: 'Hello World!'
            }
        })
    </script>
</body>
</html>

结果：
在这里插入图片描述
这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作
其中的
在这里插入图片描述
也可以写成
在这里插入图片描述

三、基础语法

（1）、单向数据绑定 v-bind v-bind 特性被称为指令。指令带有前缀 v- 除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号 （:）

（2）、双向数据绑定 v-model
什么是双向数据绑定？

  • 当数据发生变化的时候，视图也会跟着发生变化
    • 数据模型发生了改变，会直接显示在页面上
  • 当视图发生变化的时候，数据也会跟着同步变化
    • 用户在页面上的修改，会自动同步到数据模型中去
<!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>
    <!-- id标识vue作用的范围 --> 
    <div id="app">   
        <!-- v-bind:value只能进行单向的数据渲染 -->        
        <input type="text" v-bind:value="keyword">        
        <!-- v-model 可以进行双向的数据绑定  -->        
        <input type="text" v-model="keyword">                
        <p>您要查询的是：{{keyword}}</p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        // 创建一个vue对象
        new Vue({
            //绑定vue作用的范围
            el: '#app',
            //定义页面中显示的模型数据
            data: {
            name: 'Helen',
            keyword: 'yqw'
        }
        })
    </script>
</body>
</html>

（3）、事件
使用 v-on 进行事件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

 <div id="app">        
            <button v-on:click="show()">查询</button>        
    </div>        
    <script src="vue.min.js"></script>        
    <script>        
        new Vue({        
            el: '#app',        
            methods: {        
                show() {        
                    console.log(new Date())       
                }        
            }        
        })        
    </script>

v-on 指令的简写形式

<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>

4、修饰符

修饰符是以半角句号 （.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。 例如， .prevent 修饰符告诉 v-on 指令：阻止表单默认的提交行为

5、条件渲染

<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            ok: false
        }
    })
</script>

点击复选框，显示或隐藏协议内容。分别使用 v-if 和 v-show 实现

<div id="app">
    <input type="checkbox" v-model="ok">同意许可协议
    <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
    <h1 v-if="ok">if：协议内容.</h1>
    <h2 v-else>no</h2>
    <!-- v:show 条件指令 初始渲染开销大 -->
    <h3 v-show="ok">show：协议内容.</h3>
    <h4 v-show="!ok">no</h4>
</div>

6、列表渲染

v-for：列表循环指令 
<div id="app">
    <table style="border:1">
        <!-- <tr v-for="item in userList"></tr> -->
        <tr v-for="(item, index) in userList">
            <td>{{index}}</td>
            <td>{{item.username}}</td>
            <td>{{item.age}}</td>
        </tr>
    </table>
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userList: [
                { username: 'helen', age: 18 },
                { username: 'peter', age: 28 }
            ]
        }
    })
</script>

7、实例生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会 比如 created 钩子可以用来在一个实例被创建之后执行代码： 
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
在这里插入图片描述

8、生命周期钩子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue生命周期方法</title>
    <!--引入vue框架-->
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
</div>
 
<script>
   
     let app = new Vue({
        el:'#app',
        data:{
            message:"你好"
        },
        methods:{
            say:function () {
                console.log("yqw");
            }
        },
        beforeCreate:function () {
            /*执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,data/methods都没有初始化*/
            console.group("-----------beforeCreate 创建前状态-----------")
            console.log(this.message);  // undefined
            this.say();	// this.say is not a function
            console.log(this.say);
            console.groupEnd()
            
        },
        created:function () {
            /*执行created的时候,表示Vue实例已经初始化好了部分内容,data/methods
            * 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问
            */
            console.group("-----------created 创建完毕状态-----------")
            console.log(this.message);	// 你好
            this.say();	// yqw
            console.log(this.say);
            console.groupEnd()
        },
        beforeMount:function () {
            /*执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上*/
           console.group('----------beforeMount 挂载前状态--------')
           console.log(document.querySelector("p").innerText);	// {{message}}		
           console.log(document.querySelector("p").innerHTML);	// {{message}}
           console.groupEnd()
        },
        mounted:function () {
            /*执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了*/
            console.group('----------mounted 挂载结束状态--------')
            console.log(document.querySelector("p").innerText);	// 你好
            console.log(document.querySelector("p").innerHTML);	// 你好
            console.groupEnd()
        },
        beforeUpdate:function(){
            /*主要data中的数据发生了变化就会执行
            * 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据
            *
            * */
            console.group('----------beforeUpdate 更新前状态--------')
            console.log(this.message);
            console.log(document.querySelector("p").innerText);
            console.log(document.querySelector("p").innerHTML);
            console.groupEnd()
        },
        updated:function () {
            /*主要data中的数据发生了变化就会执行
           * 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新
           *
           * */
           console.group('----------updated 更新完成状态--------')
            console.log(this.message);
            console.log(document.querySelector("p").innerText);
            console.log(document.querySelector("p").innerHTML);
            console.groupEnd()
        },
         beforeDestroy:function(){
            /*执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用
            * 最后能使用Vue实例的地址
            * */
            console.group("-----------beforeDestroy 销毁前状态-----------")
           
            console.log(this.message);  
            this.say();
            console.log(this.say);
            console.groupEnd()
        },
        destroyed:function () {
            /*
            * 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了
            * */
            console.group("-----------destroyed 销毁完成状态-----------")
          
            console.log(this.message);
            this.say();
            console.log(this.say);
            console.groupEnd()
        }
 
    })
</script>
</body>
</html>

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

在控制台里输入以下命令来改变message的值，会看到data中的数据改变后将触发update操作
app.message='update’
在这里插入图片描述

输入**app.$destory()**命令对vue实例进行销毁
在这里插入图片描述

再次改变message的值，但却不会在触发update了，说明vue实例是真的被销毁了。
在这里插入图片描述

9、vue的路由

作用：Vue.js 路由允许我们通过锚点定义不同的 URL， 达到访问不同的页面的目的，每个页面的内容通过延迟加载渲染出来。 通过 Vue.js 可以实现多视图的 单页Web应用（single page web application，SPA） 实例： 
<!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.min.js"></script>
    <script src="vue-router.min.js"></script>
</head>
<body>
    <div id="app">
            <h1>Hello App!</h1>
            <p>
                <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                <!-- 通过传入 `to` 属性指定链接. -->
                <router-link to="/">首页</router-link>
                <router-link to="/student">会员管理</router-link>
                <router-link to="/teacher">讲师管理</router-link>
            </p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
        <script>
                // 1. 定义（路由）组件。
                // 复杂的组件也可以从独立的vue文件中引入
                const Welcome = { template: '<div>欢迎</div>' }
                const Student = { template: '<div>student list</div>' }
                const Teacher = { template: '<div>teacher list</div>' }
                // 2. 定义路由
                // 每个路由应该映射一个组件。
                const routes = [
                    { path: '/', redirect: '/welcome' }, //设置默认指向的路径
                    { path: '/welcome', component: Welcome },
                    { path: '/student', component: Student },
                    { path: '/teacher', component: Teacher }
                ]
                // 3. 创建 router 实例，然后传 `routes` 配置
                const router = new VueRouter({
                    routes // （缩写）相当于 routes: routes
                })
                // 4. 创建和挂载根实例。
                // 从而让整个应用都有路由功能
                new Vue({
                    el: '#app',
                    router
                })
                // 现在，应用已经启动了！
            </script>
</body>
</html>
qq_43742526
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础总结
weixin_50939386的博客
05-14 1273
vue是什么 渐进式javacript框架, 一套拥有自己规则的语法 vue脚手架 ​ 作用： 帮助我们搭建项目 搭建项目及环境 安装 npm install - g @vue/cli 创建项目 注意： 项目不能有大写，中文和特殊符号 vue create 项目名 切换到根目录，可以在命令行中cd,也可以自己在文件夹中cmd打开 cd 项目名 运行vue项目 npm run serve 项目结构 ​ ​ 最为主要的几个 node_modules
vue知识点总结
liyihh的博客
10-04 969
1、Vue和其他两大框架的区别 Angular 学习成本太高 React 代码可读性差 Vue 学习成本较低 很容易上手 传送门 https://cn.vuejs.org/v2/guide/comparison.html ️2、Vue是什么 Vue是一套用于构建用户界面的渐进式框架 “前端框架” 让程序员脱离自己操作DOM 专注于写逻辑和操作数据 Vue的核心库只关注视图层 易上手 便于与第三方库或既有的项目整合 当与现代化的工具链以及各种支持的库结合使用时 Vue也完全能够为复杂的单页应用提供驱动 ️3、
vue基础知识汇总
yuandawang的博客
01-06 5845
vue基础知识汇总
vue的基础知识大全，一篇文章就够了！
qq_65010070的博客
09-22 5381
Vue的基础知识，持续整理中。。。
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
vue 基础知识总结
qq_40046544的博客
09-14 3223
官方给出的概念：Vue (读音/vjuː/，类似于 view) 是一套用户构建用户界面的前端框架在创建 vue 实例期间，可以在 filters 节点中定义过滤器}}});ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向的一个空对象动态组件指的是动态切换组件的显示与隐藏。
vue2 基础入门
ClearloveYt的博客
07-03 2743
目录vue 简介vue 的特性数据驱动视图双向数据绑定MVVMvue 的基本使用vue 的调试工具vue 的指令1、内容渲染指令2、属性绑定指令3、事件绑定 4、双向绑定指令 v-model5、 条件渲染指令 6 、列表渲染指令vue过滤器 定义过滤器基本使用 私有过滤器和全局过滤器过滤器的注意点watch 侦听器使用 watch 检测用户名是否可用 侦听器的格式对象侦听器deep 选项 计算属性计算属性的特点vue-cli 的使用 安装和使用vue 项目中 src 目录的构成：vue 项目的运行流程 vu
vue知识点总结.md
03-01
vue知识点总结.md
vue知识点汇集 总结 回顾
10-27
下面将根据标题和描述，结合压缩包内的文件名称，对Vue的知识点进行详细梳理。 1. **基础概念** - **虚拟DOM**：Vue使用虚拟DOM作为数据和实际DOM之间的中间层，以提高性能和效率。 - **组件化**：Vue中的组件是...
vue基础知识总结--01
06-30
vue基础知识总结--01
Vue引入Stylus知识点总结
11-21
项目中使用引入文件有时候路径比较深，需要使用...以下为vue.config.js配置 const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { chainWebpack: config
vue知识点概括总结题库.zip
07-07
这个“Vue知识点概括总结题库.zip”文件包含了对Vue.js核心概念和关键功能的详细梳理，适合正在学习或准备面试的开发者参考。 题库文档“题库.doc”可能涵盖了以下几个Vue.js的重要知识点： 1. **基础概念**：Vue...
Vue 基础入门 - 看这一篇就够了！！！
niubiwhat的博客
09-05 5067
Vue 入门基础篇
Vue基础语法知识（自用，完整版）
m0_62068678的博客
09-12 9202
vue基础语法、尚硅谷、欢迎交流
vue基础入门
weixin_58470558的博客
05-13 6235
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
vue基础知识大全
weixin_48672377的博客
11-26 829
vue 是一个MVVM框架，Model-View-ViewModel,是一个MVC的前端版本
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue学习-基础入门篇(三万字收藏篇)
林钟一的博客
07-27 6110
Vue是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。(1) Vue 的核心库只关注视图层。 (2) 不仅易于上手，还便于与第三方库或既有项目整合。 (3) 遵循 MVVM模式 ，能够实现视图与模型的 双向绑定。(4) 编码简洁，体积小，运行效率高，适合移动/PC端开发。Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的 冷服务器启动。它做到了 本地快速开发启动, 在生产环境下基于 Rollup 打包。通过在终端中
实操：VRRP配置实验演练演示.mp4
最新发布
07-09
基于华为模拟器ENSP
vue2+vue3笔记
07-14
在Vue2中，有几个关键的知识点需要理解。首先，`mounted`和`updated`生命周期钩子在不同场景下发挥作用。`mounted`在组件实例挂载到DOM后调用，而`updated`则在数据变化导致的DOM重新渲染完成后触发。`updated`不会...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值