vue教程_vue教程入门 - CSDN
精华内容
参与话题
  • Vue最简洁最全的入门教程

    千次阅读 2019-01-25 10:57:57
    最近在学vue,主要从以下几个方面学习: •环境安装 •模板语法(怎么写) •指令 •选项、生命周期(写在哪儿) •vuejs-devtools(怎么调试) 1.Vue.js 简介 Vue.js是一套构建用户界面的UI框架,它专注于...

    最近在学vue,主要从以下几个方面学习:

    环境安装

    模板语法(怎么写)

    指令

    选项、生命周期(写在哪儿)

    vuejs-devtools(怎么调试)

    1.Vue.js 简介

    Vue.js是一套构建用户界面的UI框架,它专注于MVVM模型的ViewModel层,通过双向数据绑定把View层和Model层链接起来。

    2.Vue.js 特点

    模板双向绑定机制

    利用指令(directive)对DOM进行封装

    组件化设计思想等

    3.Vue.js 安装

    CDN script引入

    NPM

    在线编辑器(推荐)

    命令行工具 (CLI)

      安装node环境

      npm install -g @vue/cli

      vue create hello-world

      npm install

      npm run serve

    4.模板语法

    5.指令

    v-text=={{message}}

    v-html <div v-html="message2"></div>

    v-show<h1 v-show="ok">Hello!</h1>

    v-if<div v-if="type === 'A'">

    v-else<div v-else>

    v-else-if<div v-else-if="type === 'B'">

    v-for<div v-for="(item, index) in items"></div>

    v-on==@<button v-on:click="doThat('hello', $event)"></button>

    v-bind==<img v-bind:src="imageSrc"> 缩写<img :src="imageSrc">

    v-model<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>

    6.Vue事件

    V-on:监听事件

    自定义事件

    组件内抛出:this.$emit('myEvent')

    外部监听:<my-component v-on:myEvent="doSomething"></my-component>

    将原生事件绑定到组件

    <base-input v-on:focus.native="onFocus"></base-input>

    7.特殊特性

    Key有相同父元素的子元素必须有独特的 key,主要用在v-for

    Ref<input ref="input">用来给元素或子组件注册引用信息

    Slot用于标记往哪个具名插槽中插入子组件内容

    8.选项 / 数据

    Data Vue 实例的数据对象

    Props props 可以是数组或对象,用于接收来自父组件的数据

    Computed计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算

    Watch一个对象,键是需要观察的表达式,值是对应回调函数

    Methods:放置普通函数的地方

    9.生命周期

    beforeCreate此时datamethod$el均没有初始化
    created此时datamethod初始化完成,但是DOM节点并没有挂载

    beforeMount编译模板,并且将此时在el上挂载一个虚拟的DOM节点

    mounted编译模板,且将真实的DOM节点挂载在el上,可做数据请求

    beforeUpdate在数据有更新时,进入此钩子函数,虚拟DOM被重新创建

    updated数据更新完成时,进入此钩子函数

    beforeDestory组件销毁前调用,移除watchers、子组件和事件等 
    destoryed组件销毁后调用

    10.混入

    11.组件

    12.调试

    13.一些学习网站和参考资料

    https://cn.vuejs.org/v2/api/

    https://wiki.imooc.com/vue/vuejsintroduce.html

    https://codesandbox.io

    https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

    展开全文
  • Vue基础教程(白痴教程

    千次阅读 2020-07-15 12:06:28
    ViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。 当创建了ViewModel后,双向绑定是如何达成的呢? 首先,我们将上图中...

    MVVM模式

    在这里插入图片描述
    下图不仅概括了MVVM模式(Model-View-ViewModel),还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。

    ViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。

    当创建了ViewModel后,双向绑定是如何达成的呢?

    首先,我们将上图中的DOM Listeners和Data Bindings看作两个工具,它们是实现双向绑定的关键。
    从View侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;
    从Model侧看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。

    1.vue.js

    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    

    2.绿色剪头为绑定(模块化),红色箭头方法将鼠标放在“测试1111”上,会显示hello vue

    在这里插入图片描述

    3.判断

       <h1 v-if="ok">yes</h1>
        <h1 v-else>no</h1>
    

    在这里插入图片描述

    <body>
    
    <div id="app">
        <h1 v-if="type==='a'">a</h1>
        <h1 v-else-if="type==='b'">b</h1>
        <h1 v-else>c</h1>
    
    </div>
    
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
               type:'a'
            }
        });
    </script>
    </body>
    

    4.遍历数组

    <div id="app">
    
        <li v-for ="item in items">
            {{item.message}}
        </li>
    
    </div>
    
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
              items:[
                  {message: 'xyj'},
                  {message: 'xyj2'}
    
              ]
            }
        });
    </script>
    
    展开全文
  • Vue教程01(基础入门)

    万次阅读 多人点赞 2019-07-05 21:20:21
      因为最近需要使用到Vue,所以打算将Vue的学习资料详细整理一份,感兴趣的小伙伴可以一起来哦。 一、Vue基础介绍 1.什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发...

      因为最近需要使用到Vue,所以打算将Vue的学习资料详细整理一份,感兴趣的小伙伴可以一起来哦。

    一、Vue基础介绍

    1.什么是Vue.js

    • Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)
    • Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架!
    • Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)
    • 前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果;

    2.为什么要学习流行框架

    • 企业为了提高开发效率:在企业中,时间就是效率,效率就是金钱;
    • 企业中,使用框架,能够提高开发的效率;
    • 提高开发效率的发展历程:原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js(能够帮助我们减少不必要的DOM操作;提高渲染效率;双向数据绑定的概念【通过框架提供的指令,我们前端程序员只需要关心数据的业务逻辑,不再关心DOM是如何渲染的了】)
    • 在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑;

    3.Node(后端)中的 MVC 与 前端中的 MVVM 之间的区别

    • MVC 是后端的分层开发概念;
    • MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel
    • 为什么有了MVC还要有MVVM

    在这里插入图片描述

    MVVM是前端视图层的分层开发思想,主要把每个页面,分成了M,V和VM,其中VM是MVVM的思想核心:因为VM连接着M和V。
    前端页面中使用MVVM的思想,主要是为了让我们开发MVVM提供了数据的双向绑定,双向绑定是由VM提供的

    二、Vue基本使用

      此次代码工具是Visual Studio Code,小伙伴可自行下载安装。

    1.第一个案例

      代码如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <!-- 1. 导入Vue的包 -->
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      <!-- 将来 new 的Vue实例,会控制这个 元素中的所有内容 -->
      <!-- 3. Vue 实例所控制的这个元素区域,就是我们的 V  -->
      <div id="app">
        <p>{{ msg }}</p>
      </div>
    
      <script>
        // 2. 创建一个Vue的实例
        // 当我们导入包之后,在浏览器的内存中,就多了一个 Vue 构造函数
        //  注意:我们 new 出来的这个 vm 对象,就是我们 MVVM中的 VM调度者
        var vm = new Vue({
          el: '#app',  // 表示,当前我们 new 的这个 Vue 实例,要控制页面上的哪个区域
          // 这里的 data 就是 MVVM中的 M,专门用来保存 每个页面的数据的
          data: { // data 属性中,存放的是 el 中要用到的数据
          msg: '欢迎学习Vue' // 通过 Vue 提供的指令,很方便的就能把数据渲染到页面上,程序员不再手动操作DOM元素了【前端的Vue之类的框架,不提倡我们去手动操作DOM元素了】
          }
        })
      </script>
    </body>
    
    </html>
    

    注意代码中的注释!

    访问页面

    在这里插入图片描述

    在这里插入图片描述

    2.常用指令

    指令 描述
    {{}} 插值表达式
    v-cloak 解决 插值表达式闪烁的问题
    v-text 和插值一样也是使用vue中的变量,但是默认没有闪缩问题,但是会覆盖原本的内容,插值不会
    v-html 显示HTML的内容
    v-bind Vue提供的属性绑定机制,缩写是 ‘:’
    v-on Vue提供的事件绑定机制,缩写是:’@’

    2.1 插值表达式

      在HTML页面中我们需要获取Vue中的数据,这时我们可以通过插值表达式来获取,如下

      <div id="app">
      	<!-- 插值表达式获取vue中的msg信息 -->
        <p>{{ msg }}</p>
      </div>
    
      <script>
        var vm = new Vue({
          el: '#app', 
          data: {
            msg: '欢迎学习Vue' 
          }
        })
    </script>
    

    注意:插值表达式有闪缩的问题
    我们以站点的方式启动,Ctrl+shift+p :在输入中搜索 如下

    在这里插入图片描述

    在这里插入图片描述

    访问地址:http://localhost/xxx.html

    在这里插入图片描述

    在这里插入图片描述

    加载完成就会变好!这就是插值闪烁的问题

    2.2 v-cloak

      v-cloak指令可以解决上面插值闪烁的问题,如下:其实利用的就是当插值没有被加载出来的是通过 style属性将内容给隐藏了。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        [v-cloak] {
           display: none; 
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
        <p v-cloak>++++++++ {{ msg }} ----------</p>
      </div>
      <script src="./lib/vue-2.4.0.js"></script>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: 'hello',
          }
        })
      </script>
    </body>
    
    </html>
    

    2.3 v-text

      和插值差不多,也可以从vue对象中获取信息,v-text默认是没有闪烁问题的,但是会覆盖掉原有的内容,但是 插值表达式 只会替换自己的这个占位符,不会把 整个元素的内容清空,如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <p>----{{msg}}=====</p>
            <p v-text="msg"></p>
            <p v-text="msg">*******</p>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    msg:"hello vue"
                }
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    2.4 v-html

      默认我们从Vue对象中获取的信息如果含有HTML标签的话只会当做普通字符串显示,如果我们要显示标签的语义,那么需要使用v-html指令如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <p>----{{msg}}=====</p>
            <p v-text="msg"></p>
            <p v-text="msg">*******</p>
            <p v-html="msg"></p>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    msg:"<h3>hello vue</h3>"
                }
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    2.5 v-bind

      v-bind是 Vue中,提供的用于绑定属性的指令,可简写为":",属性中的内容其实写的是js表达式,可以做类似的处理,见代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="提交1" title="提交按钮"><br>
            <input type="button" value="提交2" v-bind:title="title">
            <!-- 注意: v-bind: 指令可以被简写为 :要绑定的属性 -->
            <input type="button" value="提交2" :title="title">
            <!-- v-bind 中,可以写合法的JS表达式-->
           <input type="button" value="提交2" :title="title + ' bbb'">
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    title:"title123"
                }
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    2.6 v-on

      Vue 中提供了 v-on: 事件绑定机制,具体使用如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="点击" v-on:click="show">
            <!--还可以缩写为 @-->
            <input type="button" value="点击" @click="show">
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    msg:"<h3>hello vue</h3>"
                },
                methods:{
                    show:function(){
                        alert('hello')
                    }
                }
            })
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    好了~本文就先介绍到此

    展开全文
  • Vue2.x从入门到实战

    万人学习 2019-06-24 13:10:47
    课程从Vue2.x版本的入门,一直到实战课程共58集。包括内部指令、全局API、选项、实例和内置组件、Vue-cli、Vue-router、vuex。后有一门Vue实战,带你作一个快餐店的收银系统。
  • Vue全套教程视频

    2020-07-30 23:33:32
    Vue最详细的教程。 从最基础的Vue基础到Vue大型项目讲解。 包含总共7套教学视频,超值教学视频。
  • vue教程

    千次阅读 2020-05-28 10:47:15
    https://www.jianshu.com/p/a4339bad5256 (一句话理解Vue核心内容) http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html (MVC,MVP 和 MVVM 的图示; 留下了一个疑问, 前端的mvc模式跟后端的mvc模式有区别吗?) ...

    1. 模式

    1. MVVM
    2. MVVM
    3. https://www.jianshu.com/p/a4339bad5256 (一句话理解Vue核心内容)
    4. http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html (MVC,MVP 和 MVVM 的图示; 留下了一个疑问, 前端的mvc模式跟后端的mvc模式有区别吗?)
    5. 有为什么使用vue的视频和文档, 挺有吸引力的 https://cn.vuejs.org/ (官网)

    地图

    1. http://www.jq22.com/yanshi8054 (省市区三级地址联动插件)

    理解

    1. vue官网教程

    在介绍中有视频资料

    实例

    1. 用electron加Vuejs开发桌面程序

    41赞

    打包

    1. 为什么要使用webpack进行打包呢
    展开全文
  • vue.js全套视频教程(共12章)

    热门讨论 2020-07-30 23:31:54
    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...
  • vue基础教程

    千次阅读 2019-08-13 13:33:06
    导语:今天给大家讲解vue的基础知识点。 目录 引入vue 声明式渲染 创建vue实例 数据绑定 方法 插值 指令 缩写 引入vue 下载vue.js文件:点击下载 <script src=...
  • Vue教程(路由router-基本使用)

    万次阅读 多人点赞 2019-08-03 17:59:22
      本文开始我们来给大家介绍在Vue中非常重要的一个内容,就是路由Router 什么是路由 后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源; 前端路由:对于单页面...
  • Vue.js 入门教程

    千次阅读 2018-04-20 16:18:15
    Vue.js 教程Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。MVVM...
  • vue新手入门详细教程

    2020-04-19 23:02:55
    vue.js vue.js是一套用于构建用户界面的渐进式框架。 Vue的核心:声明式渲染,组件 Vue功能:模板引擎,组件,路由,状态管理器(管理数据–可伸缩性的),自动化构建。 核心基本语法: 第一步:vue.js引入: // ...
  • vue视频教程百度云资源链接

    万次阅读 多人点赞 2019-06-20 09:36:12
    链接评论自取
  • Vue.js学习资料集(持续更新中)

    万次阅读 2017-01-10 20:39:11
    vue1.0入门教程 台湾小凡视频教程 二、社区 segmentfault-vue 知乎-vue 三、组件1、官方组件 Loader html-loader-for-webpack Router vue-router-demo vue-router1.0文档 vue-router2.0文档 Vuex(专门为 Vu
  • 2018年最新Vue从基础入门到项目实战视频教程网盘学习地址: https://pan.baidu.com/s/15D6GiHnSgA5Eo0n9G5Ws1A 若网盘地址失效,可访问此地址(下单有网盘分享地址)获取:https://www.itying.com/goods-857.html ...
  • vue.js2.0完整视频教程12套

    万次阅读 多人点赞 2019-04-21 23:07:31
    0.1智能社vuejs(1-11章全套) 0.2英文版learing vuejs 0.3Vue.js实战小米阅读开发 0.4走进Vue.js2.0 0.5Vuejs教程45节课 ...0.9Vue视频教程基础视频教程 10.vue.js实战wm平台 等...就不一一列举 ...
  • 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视频教程vue.js视频教程下载

    万次阅读 2016-09-14 07:31:51
    好不容易找到的资源,分享给大家,视频清晰。...第二套视频在我的另一篇博文中也有提到的vue.js资源汇总,vue.js教程大全,现也一并整理出来方便大家学习。vue.js视频教程百度云盘下载 Vuejs 1.0 系列教程
  • TypeScript+Vue实例完全教程

    千次阅读 2018-07-31 10:42:52
    https://zhuanlan.zhihu.com/p/32122243
  • vue全套入门教程视频资料免费领取

    千次阅读 2018-11-05 16:20:36
    为了感恩大家长久以来的关注和支持,小编准备了一些福利,整理了包含前端,Java,产品经理,微信小程序,Python,网站源码,Android应用视频教程,微信公众平台开发教程及材料等资源合集大放送。 重要的话说三遍,...
  • vue入门级教程从零搭建一个vue项目

    千次阅读 多人点赞 2020-10-13 09:34:15
    一、安装node环境 1、下载地址为:https://nodejs.org/en/ 2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3、为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ ...
1 2 3 4 5 ... 20
收藏数 37,986
精华内容 15,194
关键字:

vue教程