第三⼗⼋章 全栈⼯程师必备之新版Vue2.6 急速掌握核⼼内容

最新推荐文章于 2023-07-21 23:51:54 发布
最新推荐文章于 2023-07-21 23:51:54 发布
阅读量173 收藏
点赞数 1
分类专栏： Vue_test 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiuJia20010827/article/details/126061023
版权

 第1集 新版VueCli 4.3创建vue项⽬

 简介：使⽤vue cli 4.3创建vue项⽬

Vue 模板语法开发起步
        基于 HTML 的模版语法，允许声明式地将 DOM 绑定⾄底层 Vue 实例的数据。
        ⽤简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
        结合响应系统，在应⽤状态改变时， Vue 能够智能地计算出重新渲染组件并应⽤到 DOM 操
        作上
创建测试 vue 项⽬
vue create my-project
vue-cli 创建项⽬，⽬录介绍
vscode 打开项⽬
        需要打开⽂件夹，⽂件夹⾥⾯创建Html
原⽣ Vue 测试基础语法
使⽤ cdn 引⼊ vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> ⼩滴课堂 vue 快速⼊⻔ </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>
  • {{}}
        ⽂本插值
        ⾥⾯JavaScript 表达式⽀持
{{5+5}}
{{ message.split('').reverse().join('') }}

Vscode⾥⾯快速打开html

        安装 Live Server 插件 

第2集 新版Vue快速⼊⻔之Vue指令和参数

简介：讲解什么是 Vue 指令
VUE 的⽂档 https://cn.vuejs.org/
指令 : 带有 v- 前缀的特殊属性。 指令⽤于在表达式的值改变时，将某些⾏为应⽤到 DOM
        v-bind 指令
                HTML 属性中的值更新时使⽤
        v-if v-else 指令
                逻辑判断
        v-model 指令
                实现双向数据绑定，
                ⼀般在 input、 select 、 textarea 、 checkbox 、 radio 等表单上使⽤
        v-on指令
                监听事件，并对⽤户的输⼊进⾏响应
参数 : 在指令后以冒号指明，例如 v-bind 指令被⽤来响应地更新 HTML 属性
<p> <a v-bind:href = "url" > ⼩滴课堂 </a> </p>

附加： 指令表达式取值是不⽤加 双花括号,直接写名字

跳转百度案例：

<!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 1</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <!-- 使用双括号引用 -->
        <p>{{message}}</p>  
        <!-- {{}}相当于表达式运算，也就是执行了javascript -->
       <p> {{6+6}}</p>
       <!-- reverse()字符的反转,使用他之前必须切割成一个一个的字符 -->
        <p>{{message.split('').reverse().join('')}}</p>
        <p>{{message.split('').reverse()}}</p>
        
        <p><a v-bind:href="url">百度地址</a></p>
        
    </div>
    
    <script>
        new Vue({
            //绑定元素
            el:"#app",
            //数据源
            data:{
                message:"这是一个数据源 ，欢迎来到xiaojia",
                // 定义个百度地址
                url:"http://www.baidu.com"
            },
            //定义方法
            methods:{
                
            
            }
        })
        
    </script>

</body>
</html>

结果显示：

 

 

第3集 新版Vue快速⼊⻔之v-if 和v-else条件指令

简介：讲解新版 Vue 条件指令
  • v-if v-else逻辑判断 
<!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 1</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <h2>使用随机数来判断</h2>
       <p v-if="Math.random() > 0.6">大于0.6</p>
       <p v-else>小于0.6</p>
        <!-- 相当于display：none 隐藏-->
       <p v-show="Math.random()>0.6">使用v-show 大于0.6</p>

       <p v-if="range >= 0.4">大于等于0.4</p>
       <p v-else>小于0.4</p>
        
    </div>
    
    <script>
        new Vue({
            //绑定id ，改Vue应用到那个元素中
            el:"#app",
            data:{range:0.5},
            methods:{}
        })
        
    </script>

</body>
</html>

 结果显示:

 第4集 新版Vue快速⼊⻔之v-for 循环指令

简介：讲解新版Vue的v-for 循环指令 

  • v-for 循环指令 
<!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>v-forDemo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <ol>
            <li  v-for="user in Users">
            {{user.name}}&{{user.age}}
            </li>
        </div>
    </div>
    
    <script>
        new Vue({
            el:"#app",
            data:{
                Users:[
                    {name:"小姐姐",age:18},
                    {name:"小牛",age:29},
                    {name:"xiaohai",age:11}
                ]
            },
            methods:{
                
            }
        })
    </script>
</body>
</html>

运行结果：

 第5集 新版Vue快速⼊⻔之v-model

简介：讲解新版Vue的v-model

  • v-model 实现双向数据绑定 ，也就是你更改input数据，同步的更新视图中被绑定的数据。
<!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>v-modelDemo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        {{message}}</br>
        <input type="text" v-model="message">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{message:111},
            methods:{}
        })
    </script>
</body>
</html>

运行结果：

当我没有编辑的input数据的显示结果 

 当我编辑之后的显示结果：

 第6集 新版Vue快速⼊⻔之v-on监听事件

简介：讲解新版Vue的v-on指令 监听事件 

  • v-on 监听事件
<!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>v-onDemo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <p>{{title}}</p>
        <!-- 设置一个点击事件 -->
        <button v-on:click ="ChangeTitle">完善标题</button>
        <!-- 使用快捷方式 -->
        <button @click ="ChangeTitle">完善标题</button>
    </div>
    <script>

        new Vue({
            el:"#app",
            data:{
                title:"这是小家活动室标题"
            },
            methods:{
                ChangeTitle:function(){
                    
                    this.title= "||2022年 小家" + this.title;
                }
            }
          })
    </script>
    
</body>
</html>

运行结果：每次点击事件之后，会添加|| 2022年 小家这个字符串

 

第7集 Vue常⻅缩写 v-bind和v-on讲解 

 简介：vue常⻅缩写v-bind和v-on讲解

  • v-bind缩写  
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
  • v-on缩写 
<!-- 完整语法 -->
<a v-on:click="changeTitle">...</a>
<!-- 缩写 -->
<a @click="changeTitle">...</a>

第8集 新版Vue快速⼊⻔之component组件 

简介：讲解vue⾥⾯的组件 

  • vue的组件
    • 扩展 HTML 元素，封装可重⽤的代码（就是通⽤的模块）
  • 注册组件
    • Vue.component( 组件名 , 选项 )
  • 组件可以拷⻉多次，复⽤多次
    • 每个组件都会各⾃独⽴维护它的数据
    • data 必须是⼀个函数，⽽不是前⾯讲的 json 对象
      • 每个实例可以维护⼀份被返回对象的独⽴的拷⻉ , 否则数据就会共享出现问题         
<!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>组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
            <!-- 注意每个组件里面的cuont都是单独的，不是共用一个内存地址 -->
           <xj_component></xj_component>
           <xj_component></xj_component>
    </div>
    <script>
        Vue.component("xj_component",{
            data:function(){
                return {
                    count:0  //
                }
            },
            //创建个组件格式，复用到xj_component元素中
            template:'<button v-on:click="count++"> 点击{{count}}次 </button>'
        })


        new Vue({
            el:"#app",
            data:{},
            methods:{}
        })
    </script>
</body>
</html>

 运行结果：注意每个组件里面的cuont都是单独的，不是共用一个内存地址

第9集 新版Vue快速⼊⻔之prop向⼦组件传值 

简介：讲解vue⾥⾯通过prop向⼦组件传值 

<!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>组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
            <!-- 注意每个组件里面的cuont都是单独的，不是共用一个内存地址 -->
            <!-- 子组件写入值 -->
           <xj_component message="小家活动室 http://www.baidu.com"></xj_component>
           <xj_component message="这是另外一个子组件"></xj_component>
    </div>
    <script>
        Vue.component("xj_component",{
            //向子组件传值
            props:{
                message:{
                    //传值的类型
                    type:String
                }
            },
            data:function(){
                return {
                    count:0  //
                }
            },
            //创建个组件格式，复用到xj_component元素中,子组件传输到这里引用
            //组件里面的根节点只能包含一个
            template:'<div><p><button v-on:click="count++"> {{message}} 点击{{count}}次 </button></p></div>'
        })


        new Vue({
            el:"#app",
            data:{},
            methods:{}
        })
    </script>
</body>
</html>

运行结果：

 

  •  向⼦组件传外部data的⾥值,需要加 v-bind

<xd_component message=" ⼩滴课堂 https://xdclass.net" v-bind:XXXX></xd_component>
或缩写
<xd_component message=" ⼩滴课堂 https://xdclass.net" :XXXX></xd_component>
杰伦fans
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
创建一个vue项目搭建vue-cli环境（Vue2.9.6）
Yanfengting的博客
02-16 1155
1：打开cmd命令行，首先安装node 步骤：https://nodejs.org/en/download/ node官网，选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可，输入node -v，如果出现版本信息即表示安装成功。 2：npm包管理器是集成在node中的，所以直接输入npm -v就能查看到版本信息 3：输入npm install -g cnpm --registry=...
Vue2.6+VueCli4.3+CubeUI 完成小D课堂移动端
qq_43645678的博客
10-04 878
小滴课堂移动端项目总结笔记
使用vue-cli来搭建vue项目,路由跳转，嵌套路由
最新发布
qq_62797382的博客
07-21 365
N 新手就不用了，但实际项目中一般都会使用，这样多人开发也能达到一致的语法。5.Install vue-router：是否需要vue-router，Y选择使用，这样生成好的项目就会有相关的路由配置文件。：是否安装e2e测试 N。1.Project name：项目名，默认是输入时的那个名称spa1，直接回车。#安装所有项目需要的npm模块。运行完上面的命令后，我们需要将当前路径改变到SPA这个文件夹内，然后安装需要的模块。必须先安装vue,vue-cli，webpack，node等一些必要的环境。
视频教程-全新 Vue.js 2.6 核心技术第一季：零基础初体验-Vue
weixin_33717472的博客
05-28 415
全新 Vue.js 2.6 核心技术第一季：零基础初体验 知识传播美丽，分享...
vue2.6入门相关技术总览
公众号 Java4ye
06-30 420
我的个人网站 RyzeYang. 入门vue的一些知识点总览，如Babel,css预处理器,ES6，Eslint,vuex,vue router,mock，Elementui,v-charts,axios等 目录学习历程Vue Cli介绍安装使用Babel介绍Typescript介绍PWA (Progressive Web App)介绍Vue RouterVuex应用场景CSS Pre-processorsLinter / FormatterUnit Testing 单元测试E2E Testing 端
电子程师必备的60个网站
09-24
电子工程师必备的60个网站，一位高级电子工程师归纳总结的60个电子行业技术网站,电子工程师必备网站.　希望对广大工程师朋友有用.
机械程师英文自我介绍精选.doc
10-11
3. **专业领域与研究兴趣**：申请者表示对工业工程有极大的兴趣，并计划申请博士研究生项目，这显示了他们对深入研究的承诺和对专业领域的专注。 4. **学术成就与荣誉**：提到在硕士期间的GPA排名，以及成为教师...
软考网络程师历年真题2004-2011年
08-29
2004下-2011上软考网络程师历年真题
化学ۥ程师简历范文精选.doc
10-11
在硕士期间，她深入学习了化学理论基础与前沿研究，掌握了化学现代表征技术，并涉及材料物理化学、有机光电功能材料和纳米材料等领域。同时，她还参与了导师的科研项目，锻炼了独立进行实验研究的能力。 本科阶段，...
VUE 超级详细教程
weixin_42371679的博客
06-06 5万+
一、安装 二、基础练习 1）引入vue.js 解释： 注意：被挂载的div要放在vue的上面，否则vue管不到 2）v-for 3）做一个计数器(v-on:click) 方法一：直接在标签里实现 <div id="app"> <h2>当前计数: {{count}}</h2> <button v-on:click="count++">+</button> <button v-on:cl
Vue 命令行工具 Vue-CLI 详解
wgchen
04-21 2万+
阅读目录阐述vue全家桶vue-cliVue CLI 的安装① 默认安装 vue/cli 脚手架 3② 默认安装失败，解决mode版本问题③ nvm下载太慢问题解决④ 安装 Node ^12.0.0⑤ 从新安装 VueCli 脚手架 3④ 拉取 2.x 模板 (旧版本)⑤ 安装vue指定版本⑥ 博主node版本初始化项目① vue init命令讲解② 项目初始化③ 目录结构详解④ 运行项目node 安装适合小白1 去node官网下载2 下载完成后双击安装包，跳出安装弹窗，点击Next从新来过vue-cli
vue-cli 2.6.9 安装卸载及创建一个工程
Mihu_Tutu的博客
10-21 299
文章目录1. npm 环境调试2.npm 注册淘宝镜像3. vue cli安装卸载4. vue-cli webpack 创建一个项目（vue-cli 2.9.x） 1. npm 环境调试 node.js安装 http://nodejs.cn/download/ 选择对应的版本下载安装。 管理员身份运行 cmd 查看 npm -v 2.npm 注册淘宝镜像 临时使用 npm --registry https://registry.npm.taobao.org install express 2.持久使用
Vue2.6.0 框架使用总结
song854601134的博客
04-05 686
Vue2.6.0 框架使用总结 自定义事件 不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件： this.$emit('myEvent') 则监听这个名字的 kebab-case 版本是不会有任何效果的： <!-- 没有效果 --> <my-component v-on:my-event="doSomething"></my-component>
使用vue-cli（2.9.6）构建一个vue的项目
qq_25354709的专栏
02-11 4618
一、全局安装vue-cli npm install vue-cli -g 初始化一个vue的项目 vue init webpack vue-book ? Project name vue-book ? Project description A Vue.js project ? Author xxx ? Vue build standalone ? Install vue-route...
vue3.x全套教程(实操)
热门推荐
贝西奇谈
03-15 6万+
一、MVVM模式和第一个Vue程序 1.什么是 MVVM 该层向上与视图层进行双向数据绑定 向下与 Model 层通过接口请求进行数据交互 2.第一个Vue程序  1、创建一个 HTML 文件  2、引入 Vue.js <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>...
Vue基础19 Vue2.6更新
多啦的博客
02-21 1775
已同步到个人博客，欢迎访问。 又更新了 2019.2月，大年三十，Vue在时隔一段时间后发布了新的版本Vue2.6，版本号是Macross（超时空要塞） 真是，不让人过好年啊。学不动了。 吐槽归吐槽，该学还是得学习。相对来说Vue的文档和教程是最平易近人、最易理解的了，而且尤雨溪还亲自发表文章介绍了Vue2.6的更新情况，更没有不跟进的理由了。 Slots：新语法，性能优化，准备接轨3.0 语...
2、⼯资管理系统 背景资料： 1）某单位现有1000名员⼯，其中有管理⼈员、财务⼈员、技术⼈员和销售⼈员。 2）该单位下设4个科室，即经理室、财务科、技术科和销售科。 3）⼯资由基本⼯资、福利补贴和奖励⼯资构成，失业保险和住房公积⾦在⼯资中扣除。 4）每个员⼯的基本资料有姓名、性别、年龄、单位和职业（如经理、⼯程师、销售员等）。 5）每⽉每⼈的最⾼⼯资不超过3000元。⼯资按⽉发放，实际发放的⼯资⾦额为⼯资减去扣除。 设计要求： 1）进⾏需求分析，编写数据字典。 2）设计E-R图。 3）实现按照科室录⼊个⼈的基本资料、⼯资和扣除⾦额的数据。 4）计算个⼈的实际发放⼯资。 5）按科室、职业分类统计⼈数和⼯资⾦额。 6）实现分类查询。 7）能够删除辞职⼈员的数据。
06-01
3. 科室表（department）：科室名称（name）。主键为科室名称。 4. 职业表（profession）：职业名称（name）。主键为职业名称。 E-R图： ``` +------------------+ +------------------+ +------------------+ +--...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值