精华内容
下载资源
问答
  • Vue.js 教程

    2021-01-19 21:26:40
    Vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。...
  • Vue.js教程-目录

    万次阅读 多人点赞 2020-08-03 15:18:52
    Vue.js教程-目录简介章节列表 简介 本目录作为Vue教程的首页,所以会持续更新。 如果某篇章节中有错误的地方,希望大家能够指出来,我会更正,私信和评论里说都可以,不懂的地方也可以说,如果我也不会那就请教一下...

    简介

    • 本目录作为Vue教程的首页,所以会持续更新,后期还会带着打相关项目
    • 如果某篇章节中有错误的地方,希望大家能够指出来,我会更正,私信和评论里说都可以,不懂的地方也可以说,如果我也不会那就请教一下大佬们吧,毕竟我对前端的东西也不是特别了解,多多包涵!嘿嘿。

    章节列表

    章节名称 地址
    Vue.js教程-安装和HelloWorld https://coderhqf.blog.csdn.net/article/details/107574556
    Vue.js教程-Vue项目的目录结构和.vue文件的构成 https://coderhqf.blog.csdn.net/article/details/107621070
    Vue.js教程-Vue基本指令 https://coderhqf.blog.csdn.net/article/details/107677588
    Vue.js教程-组件化开发 https://coderhqf.blog.csdn.net/article/details/107783664
    Vue.js教程-Vue-router https://coderhqf.blog.csdn.net/article/details/107861260
    Vue.js教程-Vue-Vuex https://coderhqf.blog.csdn.net/article/details/107861260

    Vue简介

    • Vue官网
    • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
    • Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
    • Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    Vue特点

    • 易用:在有HTML CSS JavaScript的基础上,快速上手。
    • 灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
    • 性能:20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。

    Vue中数据观测的实现

    • Vue.js利用了ES5的Object.defineProperty方法,直接将原生数据对象的属性改造为getter和setter,在这两个函数内部实现依赖的收集和触发,而且完美支持嵌套的对象结构。对于数组,则通过包裹数组的可变方法(比如push)来监听数组的变化。这使得操作Vue.js的数据和操作原生对象几乎没有差别[注:在添加/删除属性,或是修改数组特定位置元素时,需要调用特定的函数,如obj.$add(key, value)才能触发更新。这是受ES5的语言特性所限。],数据操作的逻辑更为清晰流畅,和第三方数据同步方案的整合也更为方便。

    Vue项目打包

    • 在构建大型应用时,推荐使用Webpack+vue-loader这个组合以使针对组件的开发更高效。
    • 在后面的章节中会细说怎么打包并部署到服务器上,也会讲怎么白嫖阿里云(学生版),好像有大佬写过这个文章,大家搜一下也行,最重要的还是开发。

    Vue的组件化开发

    • Vue最主要的是组件化开发,因为是单页面,也就是在一个页面中渲染出多个页面的效果,这个特点能够让非常多的组件在不同的项目中重复使用。
    • Vue中的组件基于Web components进行了上层功能的实现,例如数据绑定、动画系统等。

    Vue与后端的数据交互:axios

    • 传统的一般都用Ajax,但如果请求有先后关系的话就容易产生回调地狱,套娃套的吧。
    • Vue2之后就推荐使用axios了,等写到前后端交互的时候再讲这个就行。

    相关说明

    • Vue参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js,可以是把他们的缺点都优化成了自己的优点,参考过程中不但去其糟粕,还加入了自己的特性,但目前也只有国内用Vue的比较多,毕竟社区小,资源少,但以后应该会是潮流,因为开发快好上手。
    • 其实Vue相对来说是非常好上手的,因为它只专注于视图层。如果只是要用的话,其实对原理也不用太纠结,但既然要全栈,何不贯彻到底,我也是在学习中,如果想正规学习的话,我比较推荐coderwhy-王红君老师的课,他讲的挺好的,有些原理讲的也是很清楚的,渠道嘛,B站大学、腾讯课堂啥的都有,还有他的微博,大家可以去网上找。
    • 再强调一遍,如果发现不对的地方请联系我,因为不想误人子弟,毕竟这是自己的总结,也不想以后自己还用着错误的东西,嘿嘿嘿。。。
    • Vue作为现在国内最潮流的前端框架,也逐渐成为后端开发人员需要学的新知识了,我看现在很多后端岗位的面试里都会提到这个前端框架,所以大家学一下是不亏的。
    • 在CSDN杂志中有一篇文章:Vue.js:轻量高效的前端组件化方案,如果大家有兴趣就看看吧。
    展开全文
  • Vue.js教程视频系统,共16个视频,内容如下: 01.序言 vue.js介绍 02.第1节 安装与部署 03.第2节 创建第一个vue应用 04.第3节 数据与方法 05.第4节 生命周期 06.第5节 模板语法-插值 07.第6节 模板语法-指令 08.第7...
  • Vue.js教程

    2018-05-04 11:41:17
    最近一段时间学习了一下主流框架Vue.js,并用Vue.js的框架vux开发手机端项目,整体开发还是比较顺利,效率还是挺高的。说说使用Vue.js的感受,学习起来比较快,需要记的很少,Vux提供的组件很全,可以完成大部分的...

    最近一段时间学习了一下主流框架Vue.js,并用Vue.js的框架vux开发手机端项目,整体开发还是比较顺利,效率还是挺高的。说说使用Vue.js的感受,学习起来比较快,需要记的很少,Vux提供的组件很全,可以完成大部分的业务,自己需要单独写的代码很少。在项目开发的过程中,遇到的问题都能在网上找到解决方案。学习Vue.js的时候一定要放空自己,千万不要用JQuery那一套思路来学习。下面雷雪松结合自己实际使用情况总结一下Vue相关知识点分享给大家。

     

    1、Vue属性和方法
    Vue.nextTick :在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

    1
    2
    3
    4
    5
    6

    // 修改数据
    vm.msg = 'Hello'
    // DOM 还没有更新
    Vue.nextTick(function () {
    // DOM 更新了
    })

    Vue.set :设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

    2、Vue实例属性和方法
    vm.$nextTick:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

    1
    2
    3
    4
    5

    this.$nextTick(function () {
    // DOM 现在更新了
    // `this` 绑定到当前实例
    this.doSomethingElse()
    })

    vm.$set :这是全局 Vue.set 的别名。

    3、Vue实例生命周期

    一般用的最多的就是mouted这个时候可以请求接口,获取页面所需数据。

    4、Vue常用指令
    v-for:基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名。
    v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ,将提出它的内容作为条件块。
    v-else-if:前一兄弟元素必须有 v-if 或 v-else-if。
    v-else:前一兄弟元素必须有 v-if 或 v-else-if。
    v-show:根据表达式之真假值,切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。

    5、Vue事件
    a、常用指令
    v-on

    1
    2
    3
    4
    5

    <!-- 完整语法 -->
    <a v-bind:href="http://www.leixuesong.cn">...</a>

    <!-- 缩写 -->
    <a :href="http://www.leixuesong.cn">...</a>

    v-bind

    1
    2
    3
    4
    5

    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>

    <!-- 缩写 -->
    <a @click="doSomething">...</a>

    b、指令参数
    .stop: 阻止单击事件继续传播
    .prevent:提交事件不再重载页面
    .capture :即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理
    .self:只当在 event.target 是当前元素自身时触发处理函数
    .once:点击事件将只会触发一次

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis"></a>

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>

    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>

    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>

    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>

    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>

    按键别名:
    .enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift

    .meta

    来源:PHP程序员雷雪松的博客 Vue.js教程

    展开全文
  • vue.js教程 前端

    2017-11-23 17:26:30
    vue.js教程 前端 vue.js教程 前端 vue.js教程 前端 vue.js教程 前端 vue.js教程 前端 vue.js教程 前端 vue.js教程 前端
  • Vue.js教程-Vue基本指令

    千次阅读 多人点赞 2020-08-01 14:48:39
    Vue.js教程-Vue基本语法前言 前言 本章介绍Vue的基本语法。

    前言

    • 本文仅介绍基本常用指令(不包括自定义指令和相应的修饰符,这两个以后再写)。
    • 再附上官方API文档,大家也可以去看官方解释,更全面更具体。VueAPI
    • 本文所有指令写在views文件夹下的Home.vue文件中,自己学习的时候直接在App.vue中引入一下该文件就行了,不用配置路由。
      在这里插入图片描述

    Vue指令

    插值表达式

    • 在data中定义字符串或对象,在html语句中使用{{}}双花括号方式获取data里的字符串或者对象。
    • 字符串:
      在这里插入图片描述
    • 对象:
    • 在这里分为两种情况:
      • 第一种是直接取出对象。
      • 第二种是取出对象的相应字段,也就是字符串或者数字呗。
    • 直接取出对象:
      在这里插入图片描述
    • 取出对应字段:
      在这里插入图片描述
    • 在插值表达式中也支持三目运算符、数字和数组的一些基本方法,可以自己去尝试。

    v-bind

    • v-bind用于绑定数据和元素属性,父传子数据时也能用到。
    • v-bind的简写是:
    • v-bind:接的是自己起的属性名(可以随便起),然后接等于号=,双引号里面写在data里的东西,也可以直接在里面写个对象,例如设置Css啥的。
    • 最主要的还是使用父传子,在子组件中定义props,下一章再说这个,也是比较简单。
    • 两张图片唯一的不同就是第二张用了v-bind的简写,很方便。
      在这里插入图片描述
      在这里插入图片描述

    v-model

    • 对数据进行双向绑定的指令,也是经常用。
    • 具体效果亲自试一试。
      在这里插入图片描述

    v-on

    • 它就是一个调用方法的指令,简写为@
    • 怎么使用在v-if里会提到。

    v-if、v-else、v-else-if

    • v-if和v-else一听就能搭配使用,也没有什么好说的,和Java里面一样,if里如果为true,就显示if里的东西,否则显示else里的东西。
    • 我这里使用官方样例,就是切换登录方式,点击按钮切换登录方式,并不是真的登录。
      在这里插入图片描述
    <!-- v-if登录 -->
    <template>
      <div>
          <div v-if="logintype === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username" key="username-input">
          </div>
          <div v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email-input">
          </div>
          <button @click="changelogintype">切换登录方式</button>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          logintype : 'username'
        }
      },
      methods:{
        changelogintype(){
          if(this.logintype === "username"){
            this.logintype = "email"
          }
          else{
            this.logintype = "username"
          }
        }
      }
    }
    </script>
    
    <style  scoped>
    </style>
    
    • 解释一下代码,v-if中使用了双引号,所以在双引号里面要使用单引号。
    • key的作用是让这个区域是唯一的,因为如果不加key的话,无法做到切换时刷新该区域,就相当于是这个区域的身份证,给他个名字。
    • @click是单击事件,@是v-on的简写。
    • @click里面的方法名字其实是简写,完整写法@click="changelogintype()",当我们不需要为这个方法传递参数时,我们可以不传参,有些特定的方法中传入的是event,根据具体情况使用。
    • 在methods里要想获取同一组件内data里的东西,那么要使用this关键字。

    v-show和v-if的区别

    • v-show和v-if的作用是一样的,顾名思义,是让某个区域进行显示或消失。
    • 在原理上的区别:
      • 在初始化加载时,v-show是全部加载进去了,v-if是根据条件进行加载,也就是v-if会控制DOM中这个结点是否存在,而v-show只是不让这个区域显示了,但还是存在。
      • 在初始化时v-show消耗的资源更多。但在后续的情况下,如果只需要切换组件的隐藏状态,那么v-show消耗的资源会很小。如果条件很少发生改变,那么v-if会比较好。
    • v-show其实用的会更多,个人认为,跟做的项目有关系吧。。

    v-for

    • 遍历数组呗,跟Java里面的功能一样,但不同点在于,v-for可以设置一个key提供排序提示。
     <!-- v-for -->
    <template>
      <div>
          <!--数字数组-->
          <p v-for="item in list">{{item}}</p>
          <br/>
          <!--对象数组-->
          <p v-for="item in listObj" :key="item.id">{{item.id}}{{item.name}}
          <br/>
           <!--对象-->
          <p v-for="(val,key) in obj">{{key}}{{val}}</p>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          list:[1,2,3,4,5,6],
          listObj:[
            {id:1, name:'zs1'},
            {id:2, name:'zs2'},
            {id:3, name:'zs3'},
            {id:4, name:'zs4'},
            {id:5, name:'zs5'},
            {id:6, name:'zs6'},
          ],
          obj:{
            id : 1,
            name : "CoderHqf",
            age : 20
          }
        }
      }
    }
    </script>
    
    <style  scoped>
    </style>
    
    • 在第三个遍历对象里的字段时,key代表键,val代表值。
    • 在和v-if一起使用时,v-for的优先级更高,去看列表渲染教程

    v-slot

    • 简写为#,因为v-slot是新款,在使用时只能用于template里。
    • 也可用于父子传参。
    • 在使用时,父组件中的插槽可以被子组件中的插槽替换,相当于是把子组件放到父组件中的插槽。

    具名插槽

    • 就是有名字的插槽。
    • 父组件:
      在这里插入图片描述
    • 两个子组件:
      在这里插入图片描述
      在这里插入图片描述

    作用域插槽

    • 父组件能够获取到子组件中的数据。
    • 父组件:
      在这里插入图片描述
    • 子组件:
      在这里插入图片描述

    动态插槽名

    • 官网上的代码:
    <template v-slot:[dynamicSlotName]>
        ...
      </template>
    
    • 其实[]里填写的东西就是动态插槽名,里面可以写拼接的字符串、计算属性和方法,变化挺多的,但只会渲染出dynamicSlotName经过相应运算或方法处理的最终结果,很灵活。

    总结

    • 基本语法要自己动手写,一步步打好基础就可以了,官方文档在前言里有,可以去看。
    展开全文
  • 智能社Vue.js教程

    2019-06-17 18:47:49
    智能社Vue.js教程
  • TutorialsPoint Vue.js教程

    2017-04-16 18:14:52
    TutorialsPoint Vue.js教程
  • Vue.js教程之计算属性

    2020-10-21 03:49:28
    Vue.js 的内联表达式非常方便,但它最合适的使用场景是简单的布尔操作或字符串拼接。这篇文章给大家介绍了Vue.js教程之计算属性,非常不错,感兴趣的的朋友一起看看吧
  • vue.js教程

    2021-03-02 22:54:49
    script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app'..

    可以创建一个 .html 文件,然后通过如下方式引入 Vue:

    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
      <p>{{ message }}</p>
    </div>
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
    </script>


    我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。

    现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。

    我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.message 的值,你将看到上例相应地更新。
     

    展开全文
  • Vue.js教程导航

    2021-01-26 14:56:32
    Vue.js教程 安装 Vue.js Vue.js 起步 Vue.js 概述 Vue 实例 Vue.js 数据绑定语法 Vue.js 计算属性 Vue.js Class 与 Style 绑定 Vue.js 条件渲染 Vue.js 列表渲染 Vue.js 方法与事件...
  • Vue.js教程合集_极品.zip 模板 双向数据绑定 循环 多维数组 判断 过滤器 绑定动态属性 阻止事件冒泡 设置数据绑定 组件化 路由 iView 坑 断点调试 教程1 教程2 新手攻略 ...
  • Vue.js教程-Vue项目的目录结构和.vue文件的构成

    千次阅读 多人点赞 2020-07-28 00:59:54
    Vue.js教程-Vue项目的目录结构和.vue文件的构成前言Vue项目的目录结构(Vue-cli3/4版本).vue文件的构成Html区域(template)script区域export default区域style区域总结 前言 本章介绍vue项目的目录结构和一个.vue文件...
  • vue.js教程.rar

    2021-03-30 15:50:08
    vue.js入门12节教程代码,层层递进,适合html,css,javaScripT基础的小白前端人员使用,入门vue的尽快下载。
  • 智能社 vue.js 教程

    2018-03-23 18:27:19
    非常详细的 vue.js 教程,包含老师讲的所有课件,带你从入门到精通。
  • vue.js资源汇总,vue.js教程大全

    万次阅读 2016-09-13 08:18:35
    一. 资源教程综合类 vuejs 英文资料 ...Vue.js 中文系列视频教程 on Laravist英文教程 Learning Vue 1.0: Step By Step社区 sf - vue标签 知乎 - vue标签 Vue.js专业中文社区 vue - issues二. 文档API
  • Vue.js 教程 学习网站

    2018-11-15 09:59:42
    Vue.js 教程
  • 30+个视频+vue.js教程

    2019-02-25 16:52:48
    30+个视频+vue.js教程 欢迎下载
  • Vue.js教程-安装和HelloWorld

    千次阅读 多人点赞 2020-07-26 00:27:11
    Vue.js教程前言安装vue教程安装node.js 前言 作为国内最潮流的前端框架值得一学,同时公司后端面试中也会提到一些,反正就是逼着后端转全栈呗,公司少花钱,咱们多拿钱。 Vue.js官方文档:这里面介绍了很多内容,...
  • Vue.js教程视频系统,共16个视频,内容如下: 01.序言 vue.js介绍 02.第1节 安装与部署 03.第2节 创建第一个vue应用 04.第3节 数据与方法 05.第4节 生命周期 06.第5节 模板语法-插值 07.第6节 模板语法-指令 08.第7...
  • Vue.js教程 1.前端框架学习介绍什么是Vue.js为什么要学习流行框架三级目录 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以...
  • Vue.js教程视频系列,共16个视频,内容如下: 01.序言 vue.js介绍 02.第1节 安装与部署 03.第2节 创建第一个vue应用 04.第3节 数据与方法 05.第4节 生命周期 06.第5节 模板语法-插值 07.第6节 模板语法-指令 08.第7...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,206
精华内容 2,082
关键字:

vue.js教程

vue 订阅