精华内容
下载资源
问答
  • Vue框架

    千次阅读 2020-02-12 17:52:55
  • vue框架简介

    万次阅读 多人点赞 2019-06-15 04:50:36
    是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架Vue的核心库只关注视图层 vue的兼容性 Vue.js不支持IE8及其以下版本,因为Vue.js使用了IE8不能模拟的ECMAScript 5特性。Vue....

    MVVM框架概述

     

     

    什么是vue

    是一套构建用户界面的渐进式(用到哪一块就用哪一块,不需要全部用上)前端框架,Vue 的核心库只关注视图层

     

     

    vue的兼容性

    Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器

     

     

    vue学习资源

    vue.js中文官网:http://cn.vuejs.org/

    vue.js源码:https://github.com/vuejs/vue

    vue.js官方工具:https://github.com/vuejs

    vue.js官方论坛:forum.vuejs.org

     

     

    对比其他框架-React

    React 和 Vue 有许多相似之处,它们都有使用 Virtual DOM;提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更丰富的生态系统

    都有支持native的方案,React的RN,vue的Wee下

    都支持SSR服务端渲染

    都支持props进行父子组件间的通信

    性能方面:React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势,因为 Vue 的 Virtual DOM 实现相对更为轻量一些。

    不同之处就是:

    • 数据绑定方面,vue实现了数据的双向数据绑定,react数据流动是单向的
    • virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
    • state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理(如果要操作直接this.xxx)
    • 组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件

     

     

    对比其他框架-angular

    在性能方面,这两个框架都非常的快,我们也没有足够的实际应用数据来下一个结论。如果你一定想看些数据的话,你可以参考这个第三方跑分。单就这个跑分来看,Vue 似乎比 Angular 要更快一些。

    在大小方面,最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技术后使得最终的代码体积减小了许多。但即使如此,一个包含了 vuex + vue-router 的 Vue 项目 (30kb gzipped) 相比使用了这些优化的 Angular CLI 生成的默认项目尺寸 (~130kb) 还是要小的多。

    灵活性:Vue 相比于 Angular 更加灵活,Vue 官方提供了构建工具来协助你构建项目,但它并不限制你去如何组织你的应用代码。有人可能喜欢有严格的代码组织规范,但也有开发者喜欢更灵活自由的方式。

     

     

    vue.js的核心特点—响应的数据绑定

    传统的js操作页面:在以前使用js操作页面的时候是这样的,需要操作某个html元素的数据,就的使用js代码获取元素然后在处理业务逻辑

    响应式数据绑定的方式操作页面,可以直接使用像下面代码那样的写法就可以将数据填充到页面中

    <template>
      <div id="app">
        {{ message }}
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
          message: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    
    <style>
    </style>

     

     

    vue.js的核心特点—可组合的视图组件

    一个页面映射为组件树。划分组件可维护、可重用、可测试,也就是一个页面由多个组件组合而成

    vue中实现组件引入示例

    第一步:import导入需要引入的组件文件;

    第二步:注册组件;

    第三步:在需要引入组件的文件中加上组件标签(这个标签的标签名就是注册的组件名字,多个单词的和这里有xx-xx的形式)

    需要注意的是:组件可以嵌套引入,也就是说组件可以引入其他组件

    首先创建一个组件,用于被引入的组件,组件名字叫Hello.vue

    <template>
      <div class="hello">
        <h2>Essential Links</h2>
      </div>
    </template>
    
    <script>
    export default {
      name: 'hello'
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>

    然后在需要引入的组件中,先使用import导入组件

    import Hello from './components/Hello'

    然后使用components注册这个组件

    components: {
        Hello
    }

     在需要引入组件的文件中加上组件标签(这个标签的标签名就是注册的组件名字,多个单词的和这里有xx-xx的形式)

    <hello></hello>
    <template>
      <div id="app">
        {{ message }}
        <hello></hello>
      </div>
    </template>
    
    <script>
      import Hello from './components/Hello'
      export default {
        name: 'app',
        data () {
          return {
            message: 'Welcome to Your Vue.js App'
          }
        },
        components: {
          Hello
        }
      }
    </script>
    
    <style>
    </style>

    单文件组件:Js,css,html 存在一个文件中,是一个单文件组件,下面vue模板文件里的Hello.vue就是一个单文件组件

    <template>
      <div class="hello">
        <h2>{{ msg }}</h2>
      </div>
    </template>
    
    <script>
    export default {
      name: 'hello',
      data () {
        return {
          msg: 'Hello Vue'
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    </style>

     

     

    vue.js的核心特点—虚拟DOM

    虚拟DOM的概述

    运行的js速度是很快的,大量的操作DOM就会很慢,时常在更新数据后会重新渲染页面,这样造成在没有改变数据的地方也重新渲染了DOM节点,这样就造成了很大程度上的资源浪费。

    利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM

    当数据发生变化时,能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App }
    })
    
    console.dir(document)

     

     

    vue.js的核心特点—MVVM模式

    MVVM概述:M:Model数据模型 , V:view 视图模板  , vm:view-Model:视图模型

    vue的MVVM实例(双向数据绑定):当输入框输入数据的时候,相应的message也会改变

    <template>
      <div id="app">
        <input type="text" v-model="message"/>
        {{ message }}
      </div>
    </template>
    
    <script>
      export default {
        name: 'app',
        data () {
          return {
            message: 'Welcome'
          }
        }
      }
    </script>
    
    <style>
    </style>

    vue是如何实现双向数据绑定的:当数据发生改变—自动更新视图。利用Object.definedProperty中的setter/getter代理数据,监控对数据的操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
      <input type="text" id="username"><br />
      <span id="uName"></span>
    <script>
      var obj = {
        pwd: '123'
      }
      Object.defineProperty(obj, 'username', {
        set: function (val) {
          document.getElementById('uName').innerText = val
          document.getElementById('uNmae').value = val
          console.log('set')
        },
        get: function () {
        }
      })
      document.getElementById('username').addEventListener('keyup' ,function () {
        obj.username = event.target.value
      })
    </script>
    </body>
    </html>

     

     

    vue.js的核心特点—声明式渲染

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM,初始化根实例,vue自动将数据绑定在DOM模板上

    声明式渲染与命令式渲染区别

    声明式渲染:所谓声明式渲染只需要声明在哪里,做什么,而无需关心如何实现

    命令式渲染:需要具体代码表达在哪里,做什么,如何实践

    需求:求数组中每一项的倍数,放在另一个数组中实例

    命令式渲染

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
      var arr = [1, 2, 3, 4, 5]
      var newArr = []
      for (var i = 0; i < arr.length; i++) {
        newArr.push(arr[i] * 2)
      }
      console.log(newArr)
    </script>
    </body>
    </html>

    声明式渲染

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
      var arr = [1, 2, 3, 4, 5]
      var newArr = arr.map(function (item) {
        return item * 2
      })
      console.log(newArr)
    </script>
    </body>
    </html>

     

    展开全文
  • vue框架源码

    2018-08-01 17:13:51
    vue框架源码,集成了15中插件,都有对应的应用实例,下载可以直接用
  • 简单的vue框架

    2018-11-06 00:02:56
    简单的vue框架
  • vue框架移动端开发入门指南vue框架移动端开发入门指南
  • vue框架的使用

    2018-05-28 11:53:10
    vue的使用,前端框架,vue的js,在html中引用vue.js,就可以使用vue框架,简单粗暴
  • Vue框架vue-admin-template登陆问题解决

    万次阅读 热门讨论 2020-04-21 09:07:01
    Vue框架vue-admin-template登陆问题解决

    一、引言

    下面来学习一下在开发中可以直接使用的Vue两个模板框架,vue-element-adminvue-admin-template,这两者具体的介绍、功能和区别可以查看博主原文。

    vue-element-admin功能介绍

    https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能
    

    vue-element-adminGitHub地址

    https://github.com/PanJiaChen/vue-element-admin
    

    vue-element-admin项目在线预览

    https://panjiachen.gitee.io/vue-element-admin
    

    vue-admin-templateGitHub地址

    https://github.com/PanJiaChen/vue-admin-template
    

    vue-admin-template项目在线预览

    https://panjiachen.gitee.io/vue-admin-template
    

    建议:vue-admin-template是精简版,只有基础框架,我们可以在 vue-admin-template 的基础上进行二次开发,把 vue-element-admin当做工具箱,想要什么功能或者组件就去 vue-element-admin 那里复制过来。

    二、模板工程具体的使用方法

    1、下载并启动

    vue-admin-template项目从Github上把项目下载下来后,并进入项目目录,执行如下两个命令

    安装依赖

    npm install
    

    启动。执行后,浏览器自动弹出并访问 http://localhost:9528/

    npm run dev
    

    在上面执行 npm install 命令下载依赖时,可能会下载失败,此处提供一个已经下载好的依赖,可以直接执行 npm run dev 运行的完整项目。

    链接:https://pan.baidu.com/s/1y6jGRxvqR_G1pBbCx__A9w 
    提取码:bhnj 
    
    2、解决登陆问题

    当我们执行npm run dev 命令启动项目后,点击登陆按钮后,会报如下错误,这是因为源码中提供的登陆接口调不通的原因(偶尔也能通),但我们既然要在这个项目上进行二次开发,接口就都必须自己重写。
    在这里插入图片描述
    打开项目config/dev.env.js文件,我们可以看到项目调用的url前缀,在下面我们要把此处改为自己的服务接口地址。
    在这里插入图片描述
    再看一下具体的两个接口,/user/login/user/info,就是调用这两个接口进行登陆请求的。
    在这里插入图片描述
    既然我们自己要重写上面两个接口,就要知道这两个接口返回什么格式的数据,我们查看store/user.js文件,可以看到两个接口的具体返回格式。
    在这里插入图片描述

    三、后台登陆接口代码

    通过上面的分析,我们知道了两个登陆接口的具体返回需要的数据,我们就自己创建一个SpringBoot工程,定义出两个接口,并返回所需的数据即可。

    @RestController
    @RequestMapping("/user")
    @CrossOrigin
    public class LoginController {
    
        @PostMapping("/login")
        public CommonResponse login(){
            return CommonResponse.ok().data("token","admin");
        }
    
        @GetMapping("/info")
        public CommonResponse info(){
            return CommonResponse.ok()
                    .data("roles","[admin]")
                    .data("name","admin")
                    .data("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        }
    
    }
    
    

    启动后台项目,别忘了要把config/dev.env.js文件中的base_url改为我们项目的地址,并重启vue-admin-template工程!!!,这样就可以登录进去啦~~~

    在这里插入图片描述
    再来看一下,登录请求调用的接口,即为我们自己定义的接口。
    在这里插入图片描述

    好了,这样就可以在这个模板工程上进行二次开发了……


    附:CommonResponse

    public class CommonResponse {
    
        private Boolean success;
        private Integer code;
        private String message;
        private Map<String, Object> data = new HashMap<String, Object>();
    
        private CommonResponse(){}
    
        public static CommonResponse ok(){
            CommonResponse commonResponse = new CommonResponse();
            commonResponse.setSuccess(true);
            commonResponse.setCode(ResultCode.SUCCESS);
            commonResponse.setMessage("成功");
            return commonResponse;
        }
    
        public static CommonResponse error(){
            CommonResponse commonResponse = new CommonResponse();
            commonResponse.setSuccess(false);
            commonResponse.setCode(ResultCode.ERROR);
            commonResponse.setMessage("失败");
            return commonResponse;
        }
    
        public CommonResponse success(Boolean success){
            this.setSuccess(success);
            return this;
        }
    
        public CommonResponse message(String message){
            this.setMessage(message);
            return this;
        }
    
        public CommonResponse code(Integer code){
            this.setCode(code);
            return this;
        }
    
        public CommonResponse data(String key, Object value){
            this.data.put(key, value);
            return this;
        }
    
        public CommonResponse data(Map<String, Object> map){
            this.setData(map);
            return this;
        }
    
    }
    

    补充:

    如果不想写后台的接口调用代码,我们可以直接修改前端的请求方法,将登陆相关请求接口改为静态数据,不请求接口,具体修改如下:

    修改文件:\src\store\modules\user.js

    注释掉:Login、GetInfo、LogOut三个方法,替换为如下代码:

    Login方法修改:

       Login({ commit }, userInfo) {
          const data = { token: "admin" };
          setToken(data.token);
          commit("SET_TOKEN", data.token);
        },
    

    GetInfo方法修改:

     	GetInfo({ commit, state }) {
          const data = {
            roles: "admin",
            name: "admin",
            avatar:
              "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
          };
          if (data.roles && data.roles.length > 0) {
            // 验证返回的roles是否是一个非空数组
            commit("SET_ROLES", data.roles);
          } else {
            reject("getInfo: roles must be a non-null array !");
          }
          commit("SET_NAME", data.name);
          commit("SET_AVATAR", data.avatar);
        },
    

    LogOut方法修改:

    	LogOut({ commit, state }) {
          commit("SET_TOKEN", "");
          commit("SET_ROLES", []);
          removeToken();
        },
    

    FedLogOut方法修改:

        // 前端 登出
        FedLogOut({ commit }) {
          commit("SET_TOKEN", "");
          removeToken();
        }
    

    修改\src\util\request.js中的token名称:(第16行)

    config.headers['token'] = getToken()
    
    展开全文
  • 使用Vue2 Vuex VueRouter2 Webpack Axios搭建vue框架
  • Vue框架快速入门

    万次阅读 多人点赞 2017-10-17 02:51:07
    当然Vue框架算是比较高级的框架,所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。在学习Vue之前,最好先学习一下这些知识...

    Vue是现在最流行的前端框架之一,而且相对于其他两个框架React和Angular来说也更加易学,而且它的作者是国人,中文文档也很完善。当然Vue框架算是比较高级的框架,所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。在学习Vue之前,最好先学习一下这些知识。由于Vue的中文文档比较完善,所以这里只介绍Vue框架的一些核心概念,详细的使用方法还得查看官方文档。

    Vue的中文文档可以查看https://cn.vuejs.org/v2/guide/installation.html

    Vue路由功能需要导入vue-router,它的中文文档可以查看https://router.vuejs.org/zh-cn/

    Vue的状态管理功能需要使用vuex,它的中文文档可以查看https://vuex.vuejs.org/zh-cn/

    如果需要更多Vue资料,可以查看awesome-vue,列举了很多Vue资源。

    Vue基本概念

    从单文件开始

    首先,我们来抛开那些复杂的框架配置,先从单文件开始学习Vue最基本的内容。这样做很简单,讲下面的代码复制为一个HTML文件,在浏览器中打开即可。这里引用了Vue框架的CDN,所以不需要任何配置即可使用Vue。

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Vue单文件例子</title>
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
    </body>
    </html>

    Vue实例

    Vue框架中最重要的东西就是Vue实例了,它是Vue框架的核心对象。在创建Vue实例的时候需要传入一些参数,el参数是Vue实例的作用范围;data参数是Vue实例使用的数据。在Vue实例对应的元素中,我们可以使用模板语法{{var}}来使用这些数据。

    <h1>Vue实例</h1>
    <div id="s1">
      <p>{{data}}</p>
    </div>
    <script>
      let vm1 = new Vue({
        el: '#s1',
        data: {
          data: '一些数据'
        }
      })
    </script>

    模板语法

    文本插值

    上面已经展示了一个小例子。文本需要写在两对花括号之间。当然这里其实不止可以写单个变量,还可以写组合表达式,例如{{text + new Date()}}

    所有在构造Vue实例是传入的数据都是可响应的,也就是说只要数据发生改变,那么视图的数据也会发生改变。如果希望数据不发生改变,需要使用v-once指令。所有v-开头的都是Vue独有的指令,这些指令将在后面介绍。

    HTML插值

    有时候需要操作原始HTML,Vue也提供了支持。要插入的HTML代码需要使用v-html指令来指定,这个指令会将它所在的HTML代码块整个替换为要插入的HTML块。由于可能导致XSS攻击,所以最好不要随便替换HTML块。另外要替换HTML块的话只能使用v-html指令,如果使用前面的文本插值的话,插入的只是一段文本。

    属性

    文本插值只能插入文本,如果需要设置和修改HTML属性的话,需要使用v-bind指令。

    下面是一个简单的例子,将它复制到前面的HTML文件中即可看到效果。

    <h1>模板语法</h1>
    <div id="s2">
      <button v-on:click='changeText'>修改文本</button>
      <p>文本:{{text}}</p>
      <p>组合表达式:</p>
      <p v-once>只渲染一次的文本:{{text}}</p>
      <p>HTML代码:<span v-html="html"></span></p>
      <p>属性:
        <button v-bind:disabled="disabled">禁用按钮</button>
      </p>
    </div>
    <script>
      let vm2 = new Vue({
        el: '#s2',
        data: {
          text: 1,
          html: '<del>666</del>',
          disabled: true
        },
        methods: {
          changeText: function (event) {
            this.text += 1
          }
        }
      })
    </script>

    计算属性

    有时候程序逻辑比较复杂,可能需要对一个数据进行一些计算和处理。这时候就需要计算属性了。当然由于模板语法支持表达式,所以也可以直接在{{}}中编写表达式,但是不管从可读性还是可维护的角度来说,计算属性都是更好的选择。

    计算属性需要在构造Vue实例的时候传入computed属性,然后在相应的函数中处理复杂逻辑。计算属性可以向普通属性那样在视图中使用。计算属性有个优点就是惰性求值,下面的例子中,toUpper计算属性依赖于words属性,只要words不发生改变,那么多次访问toUpper不会重新出发计算,而是会使用已有的结果。只有当words发生变化时,toUpper才会相应改变。

    <h1>计算属性</h1>
    <div id="s3">
      <p>单词:{{words}}</p>
      <p>单词大写:{{toUpper}}</p>
    </div>
    <script>
      let vm3 = new Vue({
        el: '#s3',
        data: {
          words: 'I love you'
        },
        computed: {
          toUpper: function () {
            return this.words.toUpperCase()
          }
        }
      })
    </script>

    Vue指令

    v-once

    这个指令让视图只渲染一次,将来就算相应的数据发生变化,也不会重新渲染。该指令主要在希望静态显示不需要更新数据的时候使用。

    v-html

    这个指令主要在需要操作原始HTML的时候使用。

    v-bind

    该指令在需要绑定HTML标签属性的时候使用。为了方便,该指令还有一个缩写:,例如:class="myClass"就相当于v-bind:class="myClass"

    v-on

    该指令主要用于绑定事件处理程序。该指令有缩写@,例如@click="onClick"就相当于v-on:click="onClick"

    v-show、v-if、v-else和v-else-if

    这几个指令主要用于条件渲染,将在后面进行介绍。

    v-for

    该指令用于渲染整个列表,将在后面进行介绍。

    v-model

    该指令可以让页面元素和数据进行双向绑定。默认情况下数据和页面元素是单向绑定的,使用该指令可以让其变成双向绑定。该指令主要用于处理表单等场景。

    条件渲染

    v-if、v-else和v-else-if这几个指令用于条件渲染,让我们可以按照条件在页面上显示和隐藏某些元素。注意v-else-if指令是Vue 2.1新增的。类似的指令还有v-show,不过v-show指令仅仅改变元素的CSS display属性,也是说隐藏的元素还是存在于页面上,仅仅是不显示而已。而v-if等元素会真正创建和销毁元素。

    这些指令的使用方法很简单,直接看例子就行了。

    <h1>条件渲染</h1>
    
    
    <div id="s4">
      <h3>v-if渲染会实际创建和销毁对象</h3>
      <p>分数是:<input type="text" v-model="mark"/></p>
      <p v-if="mark < 60">不及格</p>
      <p v-else-if="mark <80">及格</p>
      <p v-else="">优秀</p>
      <h3>v-show仅仅调用CSS display属性</h3>
      <button @click="toggleShow">改变show状态</button>
      <p v-show="show">可以看到我</p>
    </div>
    <script>
      let vm4 = new Vue({
        el: '#s4',
        data: {
          mark: 80,
          show: true
        },
        methods: {
          toggleShow: function () {
            this.show = !this.show
          }
        }
      })
    </script>

    列表渲染

    如果需要渲染一组数据,可以使用v-for指令。v-for指令需要一个item in items块来声明迭代那些数据,这里in也可以改为of。如果需要获取迭代的索引的话,可以把迭代块声明为(item, index) in items这样的。另外除了迭代一个列表,也可以迭代一个对象的属性。

    <h1>列表渲染</h1>
    <div id="s5">
      <h3>名字列表</h3>
      <ul>
        <li v-for="name in names">{{name}}</li>
      </ul>
    
      <h3>人物表格</h3>
      <table>
        <thead>
        <tr>
          <td>编号</td>
          <td>姓名</td>
          <td>年龄</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(person, index) of people" :key="index">
          <td>{{index}}</td>
          <td>{{person.name}}</td>
          <td>{{person.age}}</td>
        </tr>
        </tbody>
      </table>
    
    </div>
    <script>
      let vm5 = new Vue({
        el: '#s5',
        data: {
          names: [
            'zhang3',
            'li4',
            'yitian',
            'jojo'
          ],
          people: [
            {name: 'zhang3', age: 24},
            {name: 'li4', age: 25},
            {name: 'yitian', age: 24},
            {name: 'jojo', age: 30}
          ]
        }
      })
    </script>

    事件处理

    v-on指令用于绑定事件处理函数,这里的函数需要在构造Vue实例的时候在methods属性中声明。

    针对键盘按键,Vue还定义了一组按键修饰别名,详情请参考官方文档。下面是一个简单的例子。

    <h1>事件处理</h1>
    <div id="s6">
      <h3>计数器</h3>
      <p>
        <button @click="addCount">增加计数</button>
        <em>{{count}}</em>
      </p>
      <h3>获取按键(单击、回车和空格)</h3>
      <input type="text"
             @keyup.enter="alert('按下了回车')"
             @keyup.space="alert('按下了空格')"
             @click="alert('单击')"/>
    </div>
    <script>
      let vm6 = new Vue({
        el: '#s6',
        data: {
          count: 0
        },
        methods: {
          addCount: function () {
            this.count++
          }
        }
      })
    </script>

    绑定表单

    如果要将数据和页面元素进行双向绑定,使用v-model指令。这个指令主要用于处理表单输入中。下面是一组表单例子。

    <h1>绑定表单</h1>
    <div id="s7">
      <p>文本框:{{text}}</p>
      <p>多行文本:{{textArea}}</p>
      <p>单选按钮:{{radio}}</p>
      <p>复选框:{{checkbox}}</p>
      <p>多选框:{{select}}</p>
      <hr>
      <p>文本框:<input type="text" v-model="text"></p>
      <p>多行文本:<textarea v-model="textArea"></textarea></p>
      <p>单选按钮:<input type="radio" v-model="radio" value="1" id="one"><label for="one">1</label>
        <input type="radio" value="2" v-model="radio" id="two"><label for="two">2</label>
      </p>
      <p>复选框:<input type="checkbox" v-model="checkbox" id="checkbox"><label for="checkbox">复选框</label></p>
      <p>多选框:<select id="select" v-model="select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      </p>
    </div>
    <script>
      let vm7 = new Vue({
        el: '#s7',
        data: {
          text: 'text',
          textArea: 'textArea',
          radio: '',
          checkbox: '',
          select: '',
        }
      })
    </script>

    在处理表单输入的时候,还有.lazy.number.trim几个修饰符,它们的作用分别是在change事件中更新、将表单输入转换为数值以及去掉表单中的前后空格。

    组件

    前面介绍了Vue的各种功能,但是这些功能并不能直接在项目中使用。因为如果直接使用的话,会导致出现一个非常大的Vue实例,这和将所有代码都写在一个文件的道理是一样的。所以Vue引入了组件来进行模块化功能。

    定义组件和定义一个Vue实例类似。不同的是,组件需要有自己的模板,而且组件的data属性必须是一个函数。原因是假如一个组件在多个地方复用,那么原本的data属性会导致所有组件实例共用一个属性值。使用函数后,每个组件实例都会有自己独立的数据。更加详细的解释和例子请查看官方文档。

      let component1 = {
        template: '<h3>{{hello}}</h3>',
        data() {
          return {
            hello: 'hello world'
          }
        }
      }

    定义好了组件之后,我们还需要在Vue中注册它。第一种方法是全局注册,这样组件就可以在全局范围中使用。

    Vue.component('组件标签名', {
      //实际组件
    })

    第二种方法更常见,就是局部注册。将组建注册到局部Vue实例,那么组件只会在该实例的作用域内可见。局部注册需要在创建Vue实例的时候讲组件传入到components属性中。

      let vm8 = new Vue({
        el: '#s8',
        components: {
          'hello-world': component1,
        }
      })

    组件注册完毕之后,我们就可以像使用自定义标签一样使用它了。

    <hello-world></hello-world>

    如果需要从父组件中传递数据,需要在子组件中声明props属性制定要传入的数据。

      let component1 = {
        template: '<p>{{hello}} {{name}}</p>',
        data() {
          return {
            hello: 'hello world'
          }
        },
        props: [
          'name'
        ]
      }

    然后就可以像这样传递数据了。

    <hello-world name="zhang3"></hello-world>

    如果需要传递动态数据,使用v-bind指令即可。

    <hello-world :name="name"></hello-world>

    一个完整的例子见下。

    <h1>组件</h1>
    <div id="s8">
      <h3>hello world组件</h3>
      <hello-world></hello-world>
      <h3>从父组件传递数据</h3>
      <hello-world name="zhang3"></hello-world>
      <h3>动态传递数据</h3>
      <hello-world :name="name"></hello-world>
    </div>
    <script>
      let component1 = {
        template: '<p>{{hello}} {{name}}</p>',
        data() {
          return {
            hello: 'hello world'
          }
        },
        props: [
          'name'
        ]
      }
      let vm8 = new Vue({
        el: '#s8',
        data: {
          name: 'yitian'
        },
        components: {
          'hello-world': component1,
        }
      })
    </script>

    过渡效果

    最后来说说Vue的过渡效果,这里只说说最基本的进入离开过渡。Vue还支持更加复杂的状态过渡,如果想了解这些更复杂的知识,请直接查看文档。

    Vue封装了一个组件transition,当其中的组件被插入、删除,或者发生变化的时候,会自动查看这些组件是否应用了过渡CSS类,然后再恰当的时机插入和删除这些类,从而实现过渡效果。过渡类名在官方文档中有介绍,还有一张过渡示意图,这里我就不再介绍了。

    比如说我现在需要一个透明度过渡效果。我可以这样编写CSS类。

        .v-enter-active {
          transition: all 1s;
        }
    
        .v-leave-active {
          transition: all 1s;
        }
    
        .v-enter, .v-leave-to {
          opacity: 0;
        }

    然后用下面的方法使用,就可以看到实际效果了。

    <div id="s9">
      <h3>按钮过渡</h3>
      <button @click="show = !show">改变状态</button>
      <transition>
        <p v-if="show">Hello</p>
      </transition>
    </div>
    <script>
      let vm9 = new Vue({
        el: '#s9',
        data: {
          show: true
        }
      })

    当然对于我这种前端小白来说,自己编写过渡和动画效果还是有点困难。幸好有很多第三方动画库,而且Vue允许我们自定义类名,以便和这些动画库配合使用。比方说Animate.css,我们可以将CDN添加到页面中来使用。

    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">

    然后自定义类名即可。

      <transition enter-active-class="animated fadeInLeft"
                  leave-active-class="animated fadeOutUpBig">
        <p v-if="show">Hello</p>
      </transition>

    完整的单文件例子可以查看我的示例项目

    Vue工程化

    前面介绍了Vue的基本概念,但是这些概念无法直接用在项目中。下面通过Vue和各种工具链的使用,来介绍如何用Vue创建实际前端项目。

    从模板创建Vue项目

    首先确保你安装了NodeJS,然后安装Vue命令行工具。如果npm速度太慢的话,可以使用淘宝镜像来加速。

    npm install -g vue-cli

    安装完成之后,使用vue-cli来创建模板项目。由于WebPack打包工具现在非常流行,所以这里选择创建WebPack模板。创建的时候除了Vue之外,其他组件如vue-router、eslint等都不要选。

    vue init webpack your-app-name

    项目创建完毕之后,切换到项目文件夹中,可以看到已经生成了一堆文件。然后我们使用npm i来安装所有的依赖包。安装完成之后,使用npm run dev来运行测试服务器。这个项目模板支持热重载等特性,所以我们接下来的开发过程可以直接在此基础上进行,不需要重启服务器。这时候我们也可以使用WebStorm的开发工具编辑项目,充分享受IDE带来的便捷。

    下面介绍一下模板项目的结构。build和config文件夹存放的是项目的构建文件和配置文件,会有WebPack和npm使用。node_modules是项目所需的模块存放位置。src文件夹下存放着项目所需的源代码,主要是JavaScript和Vue文件。assets文件夹存放的是项目所需的静态文件,例如图片、样式表等。components文件夹是Vue组件的存放位置。App.vue是项目默认的跟组件。main.js是项目的入口JavaScript文件。index.html是项目的默认HTML文件。图里面还有一个sample.html,就是上面我介绍Vue时使用的单HTML文件。

    项目结果图

    单文件组件

    前面介绍了Vue强大的组件功能,但是这种组件是不能扩展的。一般情况下,项目中应该使用单文件组件。在上面创建的项目中,实际上已经包含了一个单文件组件。让我们看看实际的项目应该如何组织这些组件。

    先来看看主HTML文件index.html,它的内容很简单。它的真实内容会由WebPack打包进去。一般情况下我们只需要保持不变就好了。当然页面标题之类的属性还是要改的。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>vue-sample</title>
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>

    然后来看看项目入口文件main.js,它的内容如下。可以看到它的作用很简单,创建根Vue实例,并将根应用组件App注入其中。

    import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      template: '<App/>',
      components: { App }
    })

    然后来看看根组件App.vue中写了什么,这是一个单文件组件,它调用了另一个单文件组件<hello-world/>。单文件组件和前面介绍的组件一样,都有一个模板属性,需要注意模板属性中的元素必须有一个根元素,不能出现多个并列的元素。还有一个脚本块,这里是单文件组件中代码逻辑部分,需要注意的是,这个地方必须向外暴露创建Vue实例所需的那个属性对象。这里还有一个样式块,是单文件组件修改样式的地方。

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <hello-world/>
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld'
    
    export default {
      name: 'app',
      components: {
        HelloWorld
      }
    }
    </script>
    
    <style>
    ...
    </style>

    Vue路由快速入门

    安装

    最简单的办法就是在前面创建模板项目的时候同时选择使用vue-router。如果没有在创建项目是选择vue-router,就需要手动添加到项目中。

    下面用前面创建的没有安装vue-router的模板项目做例子来介绍。首先需要安装vue-router并将其添加到package.json文件中。

    npm i -S vue-router

    然后创建src/router/index.js文件,并在其中添加如下代码。这样会在全局注册Vue路由组件。

    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router()

    最后在项目入口文件src/main.js中在全局Vue实例中注册路由。

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      template: '<App/>',
      components: {App}
    })

    这样Vue路由功能就注册好了。

    添加路由

    下面来添加第一个路由。和Vue实例一样,router实例也可以在构造的时候通过参数来配置。首先在路由构造函数中添加路由属性,每个路由都需要有路径、组件名以及实际组件。

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Hello',
          component: HelloWorld
        },
      ],
    })

    添加好路由之后,为了能让程序随路由变化而显示不同内容,我们还需要使用vue-router预设的组件<router-view/>,它会在运行的时候替换为我们所定义的组件。在这个例子中,只需要将App.vue文件中的hello-world组件替换为router-view即可。

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view></router-view>
      </div>
    </template>

    切换为HTML5历史模式

    在使用Vue路由的时候,我们会发现浏览器中的地址长的是这个样子:xxx/#/。这是Vue路由的默认哈希模式,优点就是兼容性强。还有另外一种模式就是HTML历史模式。要使用这种模式很简单,在构造Vue路由的时候,将mode参数设置为history即可。这样一来,浏览器地址栏就会变成正常状态。当然这种模式也有缺点,就是假如后台没配置好,访问某些页面可能会返回404错误。所以具体使用哪种模式还需要自己仔细考虑。

    export default new Router({
      routes: [
        {
          path: '/',
          name: 'Hello',
          component: HelloWorld
        },
      ],
      mode: 'history'
    })

    Vue路由相对于Vue核心框架来说,没什么复杂的概念,基本上很容易理解和上手。所以我这里就不做过多介绍了。官方文档介绍的更加完整。

    Vue和视图框架

    通过以上学习我们可以看到Vue可以算是一个MVVM框架,主要作用就是将前台页面和数据绑定起来。为了做出漂亮的视觉效果,我们还需要和其他视图框架进行集成。

    和Bootstrap 4集成

    Bootstrap是最著名的前端框架之一,可以帮助我们迅速创建漂亮的页面。现在它的最新版本是4.0.0-beta,基本可以在项目中投入使用了。现在假设我们有一个启用了路由功能的基于WebPack的Vue模板项目,来看看如何安装Bootstrap 4吧。

    首先,用npm安装Bootstrap 4和相关的几个依赖包。这里特别注意Bootstrap的版本,这里我们用的是4 。如果不加版本号的话,会安装3的稳定版。不过现在稳定版已经停止更新了,不会再添加任何新功能了,只进行bug修复和维护。

    npm install -S bootstrap@4.0.0-beta jquery popper.js

    安装好之后,还需要修改WebPack配置文件。在Vue模板中,配置文件有三个,webpack.base.conf.jswebpack.dev.conf.jswebpack.prod.conf.js,分别代表基础配置、开发配置和生产配置。为了让配置在所有条件下生效,我们需要在webpack.base.conf.js中配置。办法也很简单,添加plugins属性和下面的插件即可。如果在该文件中没有导入webpack模块,还需要在开头添加一行const webpack = require('webpack')导入该模块。

      plugins: [
        ...
          new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default'],
          })
        ...
      ]

    然后在项目入口文件src/main.js中引入Bootstrap的样式文件和JavaScript文件即可。

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    // 引入Bootstrap文件
    import 'bootstrap'
    import 'bootstrap/dist/css/bootstrap.min.css'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
    ...
    })

    最后别忘了在index.html中添加Bootstrap的meta标签。

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    然后在页面中就可以使用Bootstrap样式来开发程序了。

    Bootstrap效果图

    和ElementUI集成

    element-ui是Vue 2.0的一组组件库,可以帮助我们快速开发项目。

    首先通过npm安装。

    npm i element-ui -S

    然后在main.js文件中写入以下内容。

    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-default/index.css'
    import App from './App.vue'
    
    Vue.use(ElementUI)
    
    new Vue({
      el: '#app',
      render: h => h(App)
    })

    element-ui的效果如图。

    element-ui效果图

    展开全文
  • Vue框架高仿外面App饿了么移动端,重点实现了饿了么商家页面商品浏览、商品添加购物车、购物车管理、商品评价管理等若干功能。前端主要用了Vue框架,后端数据主要存在MySQL中和JSON文件中,用到了webpack打包。
  • vue框架建立完成.rar

    2019-07-04 19:59:33
    此压缩包是vue基于hbuilderx进行编写的,实现了vue框架的搭建,同时完成vue的登录界面。
  • 导语:vue是近年来越来越火的前端开发框架,实习期间导师要求开发软件的过程中使用vue框架。由于刚刚接触前端开发,每次使用到vue框架中不理解的东西或是不会的知识,就会百度各种各样的问题,其中许多问题都能在...
  • 简单vue框架练习项目

    2020-10-08 13:51:10
    这是一个基础的vue框架练习源码,所设计的东西不是太难,适合初学者明白及看懂,由于一些原因,并没有涉及太多的样式编写,所有画面可能不是很美观,但是代码很明了
  • Vue-Mall 基于vue框架的前端商城 Vue + Django项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev
  • Vue框架Element UI教程

    千次阅读 2019-09-12 16:25:01
    Vue框架Element UI教程-安装环境搭建(一). Vue框架Element UI教程-时间选择器(二). Vue框架Element UI教程-出现和隐藏动画(三). Vue框架Element UI教程-左侧导航栏(四). Vue框架Element UI教程-导航栏跳转...
  • 搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node、npm版本,确保环境正确 node --version npm --version 2.安装vue脚手架工具vue-cli 若开发工具为...
  • vue框架开发的项目
  • vue框架实现加班统计页面,通过子路由router来实现计时任务,把累计增加的时间放到computed组件缓存中,页面美观大气,适合整合到项目中开发和新手学习之用
  • 最近在学习使用vue框架,在使用中遇到了一个问题,查找相关资料终于找了正确的姿势,所以这篇文章主要给大家介绍了关于在Vue框架中正确引入JS库的方法,需要的朋友可以参考借鉴,下面来一起看看吧。
  • 前端三大框架Vue框架详解

    千次阅读 2018-04-03 15:15:28
    Vue框架诞生于2014年,其作者为中国人——尤雨溪,也是新人最容易入手的框架之一,不同于React和Angular,其中文文档也便于大家阅读和学习。Vue用于构建交互式的Web界面的库,是一个构建数据驱动的Web界面渐进式框架...
  • vue框架搭建

    2018-07-02 18:26:52
    vue脚手架搭建的vue项目,webpacke配置文件全面。路由拦截配置
  • vue框架是ui框架么An amazing conference regarding the Vue framework was held in the US in the first week of March 2020 for two fantastic days. Some spectacular presentations were given during that time...
  • 现在市场很多前端开发的招聘岗位都或多或少的要求你要掌握vue,可以说vue在国内是非常的火爆的,下面我给大家介绍一下vue框架吧! vue是渐进式框架 vue的核心是一个视图模板引擎,但是这并不能说明vue不是一个框架...
  • 针对 Vue 框架移植的 We UI 框架的适配,让 mobile开发过程成为一种享受
  • 基于vue框架搭建的一款在线点菜app
  • Vue 框架-12-Vue 项目的详细开发流程

    千次阅读 2018-11-16 17:51:14
    Vue 框架-12-Vue 项目的详细开发流程 首先,如果你还不了解 Vue 脚手架怎么搭建? 默认的环境中有哪些文件? 文件大概是什么作用? 那么,您要先查看之前的文章才有助于你理解本篇文章: Vue 框架-10-搭建脚手架 CLI...
  • SpringBoot +vue 框架项目 代码简洁优秀 注释清楚 可以拿来直接进行二次开发 欢迎程序员们一起努力进步!
  • 主要介绍了Vue框架下引入ActiveX控件的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 最近这两天有点闲,通过自研学习了如何使用express框架搭建后台以及vue框架开发前端。express框架是用来搭建web服务,是nodejs的二次封装。vue就是前端框架。那么可以通过搭建express框架用来写接口,vue框架写页面...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 139,754
精华内容 55,901
关键字:

vue框架

vue 订阅