精华内容
下载资源
问答
  • vue教程demo,基础教程,适合入门新手
  • vue入门.pdf

    2019-10-10 11:32:03
    vue从安装到入门, 1,安装环境:node.js(vue开发必须的环境) 2,使用淘宝镜像,(加快速度的) 3,vue的几种安装方法, 4,vue的几大组件 5,vue的基本方法的使用的讲解demo 6,入门
  • Framework7 Vue 教程 入门 学习

    千次阅读 2019-02-23 13:02:13
    网上关于Framework7的博客、学习资料少之又少,所以我想把我学习Framework7 Vue入门记录一下。 Framework7 Framework7 是一个开源免费的框架可以用来开发混合移动应用(原生和HTML混合)或者开发 iOS & ...

    网上关于Framework7的博客、学习资料少之又少,所以我想把我学习Framework7 Vue的入门记录一下。


    Framework7

    Framework7 是一个开源免费的框架可以用来开发混合移动应用(原生和HTML混合)或者开发 iOS & Android 风格的WEB APP。也可以用来作为原型开发工具,可以迅速创建一个应用的原型。

    Framework7 最主要的功能是可以使用HTML、CSS和JS来开发iOS7应用。Framework7 是完全免费开源的。

    Framework7 并不能兼容所有的设备。她只专注于为 iOS 和 Google Material 设计提供最好的体验。

    如果你想开发 iOS 或者 Android 混合应用(Phonegap)或者你想开发 iOS 和 Google Material 风格的WEB APP,那么Framework7将会是你的首选。

    首先我们进入Framework7的文档官网,https://framework7.io/vue/installation.html,注意英文文档才是最新的,中文文档则是很久没更新的旧版本。

    我们采用手动安装(Manual Installation)的方式,首先你的电脑要有vue+webpack的开发环境,然后依次安装framework7和framework7-vue相关依赖,最后修改一下文件结构即可。


    1. 初始化一个vue应用

      vue init webpack framework7-vue-demo

       

    2. 安装framework7和framework7-vue

      npm install framework7
      npm install framework7-vue

    3. 修改vue文件结构(初始化App)

       官网文档 Initialize App 这一节中的 ES Modules 有相应的指导,我们要修改的文件有index.html、main.js(my-app.js)、  app.vue。 

       首先是index.html,官网给的是这样子的

       经实践发现这样子会在chrome移动端调试的时候出现缩放问题,所以我们这样子改:

       

      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="default">
        <meta name="theme-color" content="#2196f3">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <title> framework7-vue </title>
      </head>
      <body>
        <div id="app"></div>
      </body>
      </html>
      

       main.js:

      import Vue from 'vue'
      import Framework7 from 'framework7/framework7.esm.bundle.js'
      import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js'
      import Framework7Theme from 'framework7/css/framework7.bundle.css'
      
      Framework7.use(Framework7Vue);
      import App from './app.vue';
      new Vue({
        el: '#app',
        render: (h) => h(App),
      });

       

       比官网给的多了一行导入 Framework7Theme  ,如果没有这个导入将会没有样式效果

       app.vue:

      <template>
        <f7-app :params="f7params">
          <f7-view main url="/"></f7-view>
        </f7-app>
      </template>
      <script>
        import routes from './router/index.js';
        export default {
          data() {
            return {
              f7params: {
                routes:routes,
                name: 'My App',
                id: 'com.myapp.test',
                theme: 'auto'
              }
            }
          }
        }
      </script>

       跟官网给的有一处不同即routes的导入,这个根据实际路由文件导入就好了,另外路由文件也和原vue的有所不同,查看文档的 Navigation / Router 这一节,我们将路由文件改为:

      import HelloWorld from '@/components/HelloWorld'
      export default [
      
        {
          path:'/',
          component:HelloWorld
        }
      ];
      
      

       为了查看效果,我找了文档中的一个实例 Tabbar 的实例代码替换入helleworld.vue

      <template>
        <f7-page :page-content="false">
          <f7-navbar title="Tabbar" back-link="Back">
            <f7-nav-right>
              <f7-link icon-ios="f7:reload" icon-md="material:compare_arrows" @click="isBottom = !isBottom"></f7-link>
            </f7-nav-right>
          </f7-navbar>
          <f7-toolbar tabbar :position="isBottom ? 'bottom' : 'top'">
            <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
            <f7-link tab-link="#tab-2">Tab 2</f7-link>
            <f7-link tab-link="#tab-3">Tab 3</f7-link>
          </f7-toolbar>
      
          <f7-tabs>
            <f7-tab id="tab-1" class="page-content" tab-active>
              <f7-block>
                <p>Tab 1 content</p>
                ...
              </f7-block>
            </f7-tab>
            <f7-tab id="tab-2" class="page-content">
              <f7-block>
                <p>Tab 2 content</p>
                ...
              </f7-block>
            </f7-tab>
            <f7-tab id="tab-3" class="page-content">
              <f7-block>
                <p>Tab 3 content</p>
                ...
              </f7-block>
            </f7-tab>
          </f7-tabs>
        </f7-page>
      </template>
      <script>
        export default {
          data() {
            return {
              isBottom: true,
            };
          }
        }
      </script>

       

      可以看到framework7是正常起作用的。

    4. 至此,就可以开始学习使用framework7了。

     

     

    展开全文
  • vue入门教程(一)

    千次阅读 2020-12-03 11:09:12
    1. vue简介 1.1 vue是什么 官网:https://cn.vuejs.org/ Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还...

    1. vue简介

    1.1 vue是什么

    官网:https://cn.vuejs.org/

     

    Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

    1.2 vue的特点

    1) 遵循 MVVM 模式

    2) 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

    3) 它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目

    1.3 与其它前端js框架的关联

    1) 借鉴 angular 的模板和数据绑定技术

    2) 借鉴 react 的组件化和虚拟 DOM 技术

    1.4 vue拓展插件

    • vue-cli: vue 脚手架

    • vue-resource(axios): ajax 请求

    • vue-router: 路由

    • vuex: 状态管理

    • vue-lazyload: 图片懒加载

    • vue-scroller: 页面滑动相关

    • mint-ui: 基于 vue 的 UI 组件库(移动端)

    • element-ui: 基于 vue 的 UI 组件库(PC 端)

    2. 基本使用

    2.1 hello world

    <body>
    ​
    <!--
      1. 引入Vue.js
      2. 创建Vue对象
        el : 指定根element(选择器)
        data : 初始化数据(页面可以访问)
      3. 双向数据绑定 : v-model
      4. 显示数据 : {{xxx}}
    -->
    ​
    <!--模板-->
    <div id="test">
      <input type="text" v-model="msg"><br><!--指令-->
      <input type="text" v-model="msg"><!--指令-->
      <p>hello {{msg}}</p><!--大括号表达式-->
    </div>
    ​
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
        data: {
          msg: 'world'
        }
      })
    </script>
    </body>

    2.2 调试工具

    在Chrome或Firefox浏览器的扩展插件仓库里搜vue devtool,安装Vue.js devtools.

    打开vue项目,在控制台选择vue,操作组件查看信息变化。

     

    2.3 vue的MVVM

     

    MVVM分为三个部分:分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器) 1、 M:模型层,主要负责业务数据相关; 2、 V:视图层,顾名思义,负责视图相关,细分下来就是html+css层; 3、 VM:V与M沟通的桥梁,负责监听M或者V的修改,是实现MVVM双向绑定的要点;

    MVVM支持双向绑定,意思就是当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之修改V层则会通知M层数据进行修改,以此也实现了视图与模型层的相互解耦。

    3. 模块语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。

    双大括号表达式

    语法: {{exp}}

    功能: 向页面输出数据 ,可以调用对象的方法

    指令一:强制数据绑定

    功能: 指定变化的属性值

    完整写法: v-bind:xxx='yyy' //yyy 会作为表达式解析执行

    简洁写法: :xxx='yyy'

    指令二:绑定事件监听

    1) 功能: 绑定指定事件名的回调函数

    完整写法整洁写法
    v-on:keyup='xxx'@keyup='xxx'
    v-on:keyup.enter='xxx'@keyup.enter='xxx'

    案例演示

    <div id="app">
      <h2>1. 双大括号表达式</h2>
      <p>{{content}}</p>
      <p>{{content.toUpperCase()}}</p>
    ​
      <h2>2. 指令一: 强制数据绑定</h2>
      <a v-bind:href="url">访问指定站点1</a><br>
      <a :href="url">访问指定站点2</a><br>
    ​
      <h2>3. 指令二: 绑定事件监听</h2>
      <button v-on:click="test">点我</button>
      <button @click="test2('詹姆斯')">点我</button>
      <!--<button @click="test2(content)">点我</button>-->
    </div>
    ​
    ​
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#app',
        data: {
          content: 'NBA I Love This Game',
          url: 'http://www.baidu.com'
        },
        methods: {
          test () {
            alert('湖人总冠军!')
          },
          test2 (content) {
            alert('你好,'+content);
          }
        }
      })
    </script>

    效果如下:

     

    点击链接都能跳转,点击按钮都能触发alert事件。

    4.计算属性和监听属性

    4.1 计算属性computed

    在vue应用中,在模板中双向绑定一些数据或者表达式,但是表达式如果过长,或者逻辑更为复杂时,就会变得臃肿甚至难以维护和阅读。所以在遇到复杂的逻辑时应该使用计算属性。

    • computed计算属性是用来声明式的描述一个值依赖了其它的值,当所依赖的值或者变量改变时,计算属性也会跟着改变;

    • computed根据一个现有数据去生成一个新数据,并且这两个数据会永久的建立关系,还会建立缓存,当无关数据改变的时候,不会重新计算而是直接使用缓存中的值;

    • 我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。

    <div id="app">
      <p>原始字符串: {{ message }}</p>
      <p>计算后反转字符串: {{ reversedMessage }}</p>
    </div>
     
    <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Runoob!'
      },
      computed: {
        // 计算属性的 getter
        reversedMessage: function () {
          // `this` 指向 vm 实例
          return this.message.split('').reverse().join('')
        }
      },
      methods: {
        reversedMessage2: function () {
          return this.message.split('').reverse().join('')
        }
      }
    })
    </script>

    4.2 监听属性watch

    1) 通过 vm 对象的$watch()或 watch 配置来监视指定的属性

    2) 当属性变化时, 回调函数自动调用, 在函数内部进行计算

    <div id="demo">
        姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
        名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
        姓名(单向): <input type="text" placeholder="Full Name" v-model="fullName"><br>
    </div>
    ​
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#demo',
            data: {
                firstName: 'A',
                lastName: 'B',
                fullName: 'A-B'
            },
    ​
            watch: {
                // 配置监视firstName
                firstName: function (value) { // 相当于属性的set
                    console.log('watch firstName', value);
                    // 更新fullName2  this相当于vm对象
                    this.fullName = value + '-' + this.lastName
                }
            }
        });
    ​
        // 监视lastName
        vm.$watch('lastName', function (value) {
            console.log('$watch lastName', value);
            // 更新fullName2
            this.fullName = this.firstName + '-' + value
        })
    ​
    </script>

    我们有这样一个功能,我们可以输入姓和名,然后另一个输入框要实时拼接姓和名。我们可以用watch机制来实现。

    我们监视姓和名两个变量,每次有改变,则自动触发watch对应的方法,执行逻辑。

     

    4.3 computed setter

    computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :

    <div id="demo">
      姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
      名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
      姓名(双向): <input type="text" placeholder="Full Name3" v-model="fullName"><br>
    </div>
    ​
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#demo',
            data: {
                firstName: 'A',
                lastName: 'B'
            },
    ​
            // 计算属性配置: 值为对象
            computed: {
                fullName: {
                    // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
                    get() {
                        console.log('fullName3 get()')
                        return this.firstName + '-' + this.lastName
                    },
                    // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
                    set(value) {
                        console.log('fullName3 set()', value)
                        // 更新firstName和lastName
                        const names = value.split('-')
                        this.firstName = names[0];
                        this.lastName = names[1];
                    }
                }
            }
        })
    </script>

    效果如下:

     

    5.样式绑定

    class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。

    Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

    5.1 class

    class属性绑定有三种情况:

      <p :class="myClass">xxx是字符串</p>
      <p :class="{classA: hasClassA, classB: hasClassB}">xxx是对象</p>
      <p :class="['classA', 'classB']">xxx是数组</p>
    ​
       <!--点击更新按钮 第二个p标签会实现classA和classB样式的来回切换 -->
      <button @click="update">更新</button>
    ​
    <script type="text/javascript">
      new Vue({
        el: '#demo',
        data: {
          myClass: 'classA',
          hasClassA: true,
          hasClassB: false,
          activeColor: 'red',
          fontSize: '20px'
        },
    ​
        methods: {
          update () {
            this.hasClassA = !this.hasClassA;
            this.hasClassB = !this.hasClassB;
          }
        }
      })
    </script>

    5.2 内联样式

    我们可以在 v-bind:style 直接设置样式:

    <div id="app">
        <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">湖人总冠军</div>
    </div>
    ​
    <script type="text/javascript">
        new Vue({
          el: '#app',
          data: {
            activeColor: 'green',
            fontSize: 30
          }
        })
    <script type="text/javascript">

    以上实例div为:

    <div style="color: green; font-size: 30px;">湖人总冠军</div>

    也可以直接绑定到一个样式对象,让模板更清晰:

    <div id="app">
      <div v-bind:style="styleObject">湖人总冠军</div>
    </div>
    ​
    <script type="text/javascript">
        new Vue({
          el: '#app',
          data: {
            styleObject: {
              color: 'green',
              fontSize: '30px'
            }
          }
        })
    <script type="text/javascript">

    v-bind:style 可以使用数组将多个样式对象应用到一个元素上:

    <div id="app">
      <div v-bind:style="[baseStyles, overridingStyles]">湖人总冠军</div>
    </div>
    ​
    <script type="text/javascript">
        new Vue({
          el: '#app',
          data: {
            baseStyles: {
              color: 'green',
              fontSize: '30px'
            },
            overridingStyles: {
              'font-weight': 'bold'
            }
          }
        })
    <script type="text/javascript">

    6. v-if和v-show

    相同点:v-if与v-show都可以动态控制dom元素显示隐藏

    不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还在。

    如果需要频繁切换使用 v-show 较好

    <div id="demo">
      <p v-if="ok">表白成功</p>
      <p v-else>表白失败</p>
    ​
      <hr>
      <p v-show="ok">求婚成功</p>
      <p v-show="!ok">求婚失败</p>
    ​
      <button @click="ok=!ok">切换</button>
    </div>
    ​
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#demo',
        data: {
          ok: true,
        }
      })
    </script>

    页面渲染如下:

     

    我们也可以用v-else-if进行链式调用

    <div id="app">
        <div v-if="type === 'A'">
          A
        </div>
        <div v-else-if="type === 'B'">
          B
        </div>
        <div v-else-if="type === 'C'">
          C
        </div>
        <div v-else>
          Not A/B/C
        </div>
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        type: 'C'
      }
    })
    </script>

    7. 列表渲染

    7.1 列表展示

    我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。

    <ul id="example-1">
      <li v-for="item in items" :key="item.message">
        {{ item.message }}
      </li>
    </ul>
    ​
    <script>
    var example1 = new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })
    </script>

    v-for 块中,我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数,即当前项的索引。

      <ul>
        <li v-for="(p, index) in persons" :key="index">
          {{index}}--{{p.name}}--{{p.age}}
        </li>
      </ul>
    ​
    <script>
      new Vue({
        el: '#demo',
        data: {
          persons: [
            {name: 'Tom', age:18},
            {name: 'Jack', age:17},
            {name: 'Bob', age:19},
            {name: 'Mary', age:16}
          ]
        }
    </script>

    你也可以用 of 替代 in 作为分隔符,因为它更接近 JavaScript 迭代器的语法:

    <div v-for="item of items"></div>

    7.2 列表更新和删除

    Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:

    • push()

    • pop()

    • shift()

    • unshift()

    • splice()

    • sort()

    • reverse()

    下面基于上面的代码演示一下:

        <button @click="deleteP(index)">删除</button>
        <button @click="updateP(index, {name:'Cat', age: 16})">更新</button>
    ​
        methods: {
          deleteP (index) {
            this.persons.splice(index, 1) 
                  // 调用的不是原生数组的splice(), 而是一个变异(重写)方法
                  // 1. 调用原生的数组的对应方法
                  // 2. 更新界面
          },
    ​
          updateP (index, newP) {
            console.log('updateP', index, newP)
            this.persons.splice(index, 1, newP)
          },
    ​
          addP (newP) {
            this.persons.push(newP)
          }
        }

    7.3 显示过滤/排序后的结果

    有时,我们想要显示一个数组经过过滤排序后的版本,而不实际变更或重置原始数据。在这种情况下,可以创建一个计算属性,来返回过滤或排序后的数组。

    我们实现一个案例:展示姓名和年龄的数组列表。同时可以按照姓名筛选和年龄排序。

    <div id="demo">
      姓名:<input type="text" v-model="searchName">
      <ul>
        <li v-for="(p, index) in filterPersons" :key="index">
          {{index}}--{{p.name}}--{{p.age}}
        </li>
      </ul>
      <div>
        <button @click="setOrderType(2)">年龄升序</button>
        <button @click="setOrderType(1)">年龄降序</button>
        <button @click="setOrderType(0)">原本顺序</button>
      </div>
    </div>
    ​
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#demo',
        data: {
          searchName: '',
          orderType: 0, // 0代表不排序, 1代表降序, 2代表升序
          persons: [
            {name: 'Tom', age:18},
            {name: 'Jack', age:17},
            {name: 'Bob', age:19},
            {name: 'Mary', age:16},
            {name: 'Tim', age:16},
          ]
        },
    ​
        computed: {
          filterPersons () {
            // 取出相关数据
            const {searchName, persons, orderType} = this;
            let arr = [...persons];
            // 过滤数组
            if(searchName.trim()) {
              arr = persons.filter(p => p.name.indexOf(searchName)!==-1)
            }
            // 排序
            if(orderType) {
              arr.sort(function (p1, p2) {
                if(orderType===1) { // 降序
                  return p2.age-p1.age
                } else { // 升序
                  return p1.age-p2.age
                }
    ​
              })
            }
            return arr
          }
        },
    ​
        methods: {
          setOrderType (orderType) {
            this.orderType = orderType
          }
        }
      })
    </script>

    效果图如下:

     

    展开全文
  • vue入门到精通

    2019-03-28 14:59:49
    vue入门到精通适合刚入职场的小白,也适合职场多年的前端高手,为您全方位打造
  • 全网最热Vue入门教程你不看就吃亏了哦

    万次阅读 多人点赞 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操作;提高渲染效率;双向数据绑定的概念【通过框架提供的指令,我们前端程序员只需要关心数据的业务
    展开全文
  • Vue.js v3.0 教程Vue3 教程,vue.js从入门到精通,vue.js3.0教程,零基础学习vue.js,Vue.js是一个专注于视图模型(ViewModal)的框架,轻巧、高性能、可组件化的MVVM库
  • SystemVue使用入门.pdf

    2019-06-04 09:20:50
    廖芝青编著的通讯系统模拟使用入门,教你如何使用SystemVue这款强大的工具进行通讯系统,利用一些简单的实验快速上手SystemVue
  • VUE vue组件的三个API:prop、event、slot prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的。 组件里定义的prop都是单向数据流,只能通过父级组件对齐进行修改,组件本身不能修改props的...

    目录

    一、vue组件的三个API:prop、event、slot

    二、Vue生命周期中的钩子函数

    三、自定义指令

    四、mixins基础概况

    五、修饰符


    一、vue组件的三个API:prop、event、slot

    prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的。

    组件里定义的prop都是单向数据流,只能通过父级组件对齐进行修改,组件本身不能修改props的值,只能修改定义在data里的数据,非要修改,也是通过后面介绍的自定义事件通知父级,由父级来修改;

    在子组件定义prop是,使用了camelCase的命名法,由于html特性不区分大小写。camelCase的prop用于特性时,会转为短横线隔开(比如availableValue)

    因为数组或对象是地址引用,vue不会检测到props发生改变

    但官方不建议在子组件内改变父组件的值,因为这违反了vue中props单向绑定的思想。

    solt(插槽)

    <template>
    
      <button>
    
        <slot name="icon"></slot>
    
        <slot></slot>
    
      </button>
    
    </template>

    这里的节点就是指定的一个插槽的位置,这样在组件内部就可以扩展内容了;

    这样,父级内定义的内容,就会出现在组件对应的 slot 里,没有写名字的,就是默认的 slot;

    event(事件)

    this.$emit('on-click', event);

    在组件中可以通过$emit触发自定义事件on-click,在父组件通过@on-click来监听组件之间的通信方式

    父组件向子组件的通信方式可以通过props传递, 子组件向父组件传递数据则可以通过event传递: 

    非父子组件之间的通信方式:eventBus

    我是使用的通过在根组件,也就是#app组件上定义了一个所有组件都可以访问到的组件,具体使用方式如下;

    使用eventBus传递数据,我们一共需要做3件事情

    1.给app组件添加Bus属性 (这样所有组件都可以通过this.$root.Bus访问到它,而且不需要引入任何文件);

    2.在组件1里,this. emit触发事件;

    3.在组件2里,this. on监听事件;

    this.$nextTick:

    在某个动作有可能改变DOM元素结构的时候,对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中,Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。

    $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 。

    因为数据在页面的加载是有延迟,而$nextTick是在下次DOM更新时执行,$nextTick正好符合我们的要求。

    vue中本身是不支持ajax的,要想进行异步请求,则需要通过axios来进行操作。但是再使用Echarts的时候,则需要获取所有的数据后,在进行更新图标数据。

    这是可以通过async/ await来处理异步/同步请求:

    给对象赋值

    由1可以引申出,地址引用类型的数据,例如对象obj ={a:1},如果想要修改obj中的a属性,通过obj.a = 2这样赋值,页面不会更新,需使用vue.set方法更改才会起作用, Vue.set(this,obj,a,2) 或者 this.$set(obj,'a',2);或者this,$forceupdate()

    Vue 实例的数据都保存在 data 对象中,Vue 将会递归将 data 的属性转换为 getter/setter,
    从而让 data 的属性能够响应数据变化。

    同样,如果要给obj增加一个新属性,如果该属性未在data中声明,页面也不会刷新。也就是vue文档中声明的“Vue 不能检测到对象属性的添加或删除”,同样需要使用vue.set 或者this.$set方法进行赋值才好使。

    深拷贝/浅拷贝

    先来看一个简单的例子:

    let obj = {name:'fiona-SUN'};
    
    let copyObj = obj;
    
    copyObj.name = 'fiona';
    
    console.log(copyObj.name);  // 'fiona'
    
    console.log(obj.name);     // 'fiona'

    在js中也有栈(stack)和堆(heap)的概念:

    栈:自动分配的内存空间,大小确定会自动释放。存放变量/局部变量/形参等。在js中存放简单数据段(五种基本数据类型:Number、String、Boolean、Null、Undefined),他们是按值存放的,可以直接访问。

    堆:动态分配的内存,大小不定并且不会自动释放。存放在堆内存中的对象,栈中的变量实际保存的是一个指针,这个指针指向堆中的某一个位置。

    所以上述例子中,属于浅拷贝,当我们声明一个对象,由于他不属于五种基本数据类型(即非简单数据段),栈中会存放一个我们声明的obj变量,它指向了堆中实际的这个对象的地址。当我们把这个引用地址赋值给了copyObj,实际它获得的是一个与obj一致的指向堆中的地址。当copyOjb改变了指向的对象地址的实际的值的时候,obj拿到的值也就自然而然变化了。看图理解

    es6之展开Object.assign(拷贝obj的内容到一个新的堆内存,copyObj存储新内存的引用)

    复制一个对象

    const obj = { a: 1 };
    
    const copy = Object.assign({}, obj);
    
    console.log(copy); // { a: 1 }

    针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。

    let obj1 = { a: 0 , b: { c: 0}};
    
    let obj2 = Object.assign({}, obj1);
    
    console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
    
    
    
    obj1.a = 1;
    
    console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
    
    console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
    
    
    
    obj2.a = 2;
    
    console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
    
    console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
    
    
    
    obj2.b.c = 3;
    
    console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
    
    console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}

    为大家精心准备了vue课程,微信搜索关注公众号:【zhulin1028】,或者扫描以下二维码,回复【vue课程】即可免费获取。

     

    二、Vue生命周期中的钩子函数

      1). 初始化显示(只执行一次)
        * beforeCreate()el 和 data 并未初始化

        * created()  完成了 data 数据的初始化,el没有

        * beforeMount()完成了 el 和 data 初始化

        * mounted()完成挂载,
    获取到DOM节点
      2). 更新状态(可执行多次)
        * beforeUpdate()
        * updated()
    :我们单击页面中的“更新数据”按钮,将数据更新。下面就能看到data里的值被修改后,将会触发update的操作


      3). 销毁vue实例: vm.$destory()(只执行一次)
        * beforeDestory()
        * destoryed()

     created()/mounted(): 发送api请求, 启动定时器等异步任务
     beforeDestory(): 做收尾工作, 如: 清除定时器,音频播放器

    destoryed :销毁完成后,我们再重新改变message的值,vue不再对此动作进行响应了。但是原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了。因为这个Vue实例已经不存在了。

    实例:

    vue中的setInterval在页面离开之后仍会执行,在切换多个路由之后,定时器的速度会越来越快

       beforeDestory(){

       if(this.timer){

          clearInterval(this.timer)

          }}

    总结:用created还是mounted方法看情况,一般放到created里面就可以了,这样可以及早发请求获取数据,如果有依赖dom必须存在的情况,就放到mounted(){this.$nextTick(() => { /* code */ })}

    ref

    ref 被用来给元素或子组件注册引用信息的静态节点,引用信息将会注册在父组件的 $refs 对象上。

      如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件,ref和$refs其实就是用来获取/操作DOM元素的;类似于jquey中的$(".xxx");

    缓存问题

    ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用

    vue中过滤器filters的使用

    组件内写法

    filters:{
    
        filter:function(data,arg1,arg2){
    
            return ....
    
        }
    
    }

    1.在html中使用

    {{ msg | filter('arg1','arg2') }}

    2.methods中使用,并传参

    methods:{
    
        fn(){
    
            let filter = this.$options.filters['filter']
    
            let data = filter(this.msg,arg1,arg2)
    
        }
    
    }

    3.在v-html中使用filters

    <p><v-html="$options.filters.filter(this.msg,arg1,arg2)"></p>

    Directive:指令

    v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

    v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

    相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换,不用在效验必选项

    v-show是通过css的display:none进行隐藏控制,所以一开始就会渲染,肯定能够取到元素

    一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

    三、自定义指令

    组件:一般是指一个独立实体,组件之间的关系通常都是树状。
    Vue指令:用以改写某个组件的默认行为,或者增强使其获得额外功能,一般来说可以在同一个组件上叠加若干个指令,使其获得多种功能。比如 v-if,它可以安装或者卸载组件。

    Vue 指令生命周期

    bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
    inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
    update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
    componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
    unbind:只调用一次,指令与元素解绑时调用。

    生命周期函数中的参数

    el: 指令所绑定的元素,可以用来直接操作 DOM,就是放置指令的那个元素。
    binding: 一个对象,里面包含了几个属性

    name:指令名,不包括 v- 前缀。

    value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2

    oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

    expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"

    arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"

    modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }

     vnode:Vue 编译生成的虚拟节点。
    oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用

    <div v-demo="model">自定义指令</div>

    provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
    这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

    这样,任何页面或组件,只要通过 inject 注入 app 后,就可以直接访问 userInfo 的数据了,比如:

    四、mixins基础概况

    vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~

    混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

    总结

    vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。

    Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。

    与公共组件的区别

    组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。

    Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。

    利用本地化缓存机制

    这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护;

    通过window.localStorage.getItem(key) 获取数据; 通过window.localStorage.setItem(key,value) 存储数据;

    注意用JSON.parse() / JSON.stringify() 做数据格式转换;

    五、修饰符

    vue中的修饰符主要分为两类:

    1.事件修饰符:

    .stop 阻止单机事件冒泡

    .prevent 阻止默认行为(比如 @submit.prevent 会阻止提交后刷新页面)(类似a标签javascript:void(0)

    .capture 添加事件侦听器时使用捕获模式

    .self 只有事件在元素本身(而不是子元素)触发时触发回调

    .once 只触发一次(组件也适用)

    .key 触发事件的按键

    修饰符可以串联

    .native

    现在在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件,可以使用 .native 修饰符

    就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加'. native'事件是无法触  发的。

    @keyup.enter.native

    2.v-model 修饰符:

    .lazy

    在各种情况下,v-modelinput事件中同步输入框的值与数据,但你可以添加一个修饰符lazy,从而转变为在change事件中同步:

    <!-- 在 "change" 而不是 "input" 事件中更新 -->

    <input v-model.lazy="msg" >

    .number

    如果想自动将用户的输入值转换为Number类型(如果原值的转换结果为NaN则返回原值),可以添加一个修饰符numberv-model来处理输入值:

    <input v-model.number="age" type="number">

    这通常很有用,因为在type="number"时HTML中输入的值也总是会返回字符串类型。

    .trim

    如果要自动过滤用户输入的首尾空格,可以添加trim修饰符到v-model上过滤输入:

    插槽

    除非子组件模板包含至少一个<slot>插口,否则父组件的内容将被替换。当子组件模板只有一个没有属性的slot时,父组件整个内容片段将插入到slot所在的DOM位置,并替换掉slot标签本身。

    最初在<slot>标签中的任何内容都被替换为内容。备用内容在子组件的作用域内编译,并且仅在容纳元素为空,且没有要插入的内容时才显示备用内容。

    假定my-component组件有下面模板:

    <div>
    
      <h2>我是子组件的标题</h2>
    
      <slot>
    
        只有在没有要分发的内容时才会显示。
    
      </slot>
    
    </div>

    父组件模版:

    <div>
    
      <h1>我是父组件的标题</h1>
    
      <my-component>
    
        <p>这是一些初始内容</p>
    
        <p>这是更多的初始内容</p>
    
      </my-component>
    
    </div>

    渲染结果:

    <div>
    
      <h1>我是父组件的标题</h1>
    
      <div>
    
        <h2>我是子组件的标题</h2>
    
        <p>这是一些初始内容</p>
    
        <p>这是更多的初始内容</p>
    
      </div>
    
    </div>

    具名插槽

    <slot>可以元素用一个特殊的属性name来配置如何配给物内容。多个槽可以有不同的名字。具名时隙匹配将内容片段中有对应slot特性的元素。

    仍然可以有一个匿名slot,它是替换slot,作为找回匹配的内容片段的备用插槽。如果没有替换的slot,这些发现匹配的内容片段将被抛弃。

    例如,我们假定一个有app-layout组件,它的模板为:

    <div class="container">
    
      <header>
    
        <slot name="header"></slot>
    
      </header>
    
      <main>
    
        <slot></slot>
    
      </main>
    
      <footer>
    
        <slot name="footer"></slot>
    
      </footer>
    
    </div>

    父组件模版:

    <app-layout>
    
      <h1 slot="header">这里可能是一个页面标题</h1>
    
    
    
      <p>主要内容的一个段落。</p>
    
      <p>另一个主要段落。</p>
    
    
    
      <p slot="footer">这里有一些联系信息</p>
    
    </app-layout>

    渲染结果为:

    <div class="container">
    
      <header>
    
        <h1>这里可能是一个页面标题</h1>
    
      </header>
    
      <main>
    
        <p>主要内容的一个段落。</p>
    
        <p>另一个主要段落。</p>
    
      </main>
    
      <footer>
    
        <p>这里有一些联系信息</p>
    
      </footer>
    
    </div>

    在组合组件时,内容分发API是非常有用的机制。

    作用域插槽

    2.1.0补充

    作用域插槽是一种特殊类型的插槽,利用使用一个(能够传递数据到)可重用模板替换已渲染元素。

    在子组件中,只需将数据传递到插槽,就像你将prop传递给组件一样:

    <div class="child">
    
      <slot text="hello from child"></slot>
    
    </div>

    在父级中,具有特殊属性scope<template>元素,表示它是作用域插槽的模板。scope的值对应一个临时变量名,此变量接收从子组件中传递的prop对象:

    <div class="parent">
    
      <child>
    
        <template scope="props">
    
          <span>hello from parent</span>
    
          <span>{{ props.text }}</span>
    
        </template>s
    
      </child>
    
    </div>

    如果我们渲染以上结果,得到的输出会是:

    <div class="parent">
    
      <div class="child">
    
        <span>hello from parent</span>
    
        <span>hello from child</span>
    
      </div>
    
    </div>

    作用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每一项:

    <my-awesome-list :items="items">
    
      <!-- 作用域插槽也可以在这里命名 -->
    
      <template slot="item" scope="props">
    
        <li class="my-fancy-item">{{ props.text }}</li>
    
      </template>
    
    </my-awesome-list>

    列表组件的模板:

    <ul>
    
      <slot name="item"
    
        v-for="item in items"
    
        :text="item.text">
    
        <!-- fallback content here -->
    
      </slot>
    
    </ul>
    展开全文
  • Vue最简洁最全的入门教程

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

    2020-04-28 10:33:49
    vue新手学习期间的趟坑文档,从环境安装到基础开发的一系列详细教程,从nodejs,npm,vue-cli安装到vue入门的常见大坑基本都有提及,新手入门学习首选
  • 一篇带你从小白到入门vue教程
  • Vue.js入门教程(适合初学者)

    千次阅读 多人点赞 2020-03-01 14:07:28
    Vue.js入门教程 Vue官网 https://vuejs.org/index.html Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架。也可以说Vue.js 是一个用来构建网页界面的 JavaScript 库。 Vue的常用使用方式有两...
  • 前言 新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,...Vue是一个前端框架,安装了Nodejs后,可以使用Npm命令直接下载vue。 打开cmd窗口,依次输
  • vue入门教程.pptx

    2021-10-26 13:33:02
    vue的基本原理,基础入门,安装教程,语法教程,案例展示。
  • vue入门知识PPT

    2020-03-26 19:44:23
    里面包含自己总结的一些vue入门知识,如果有需要的同学们 可以下载并看看,不足之处可以尽情提出来,本人第一次上传资源
  • vue小白入门教程

    2020-08-27 18:37:28
    vue是一套用于构建用户界面的渐进式框架,本文通过实例给大家介绍了vue入门教程适用小白初学者,非常不错,具有参考借鉴价值,需要的朋友参考下吧
  • 01 Vue的基本概念 概念 Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。即是说这个框架可以用于简单到复杂的各种场景 开发者:尤雨溪 Vue特点 1.采用组件化...
  • Vue2.js新手极速入门教程PDF高清 Vue2.js新手极速入门教程PDF高清 Vue2.js新手极速入门教程PDF高清
  • 教程是某课网已经下架的Vue2.0课程,但是确实讲的不错,希望给一些想学但是学不了的同学提供方便,加油哦
  • vue快速入门教程

    2018-07-16 21:22:01
    助你vue快速入门~~学完了感觉还不错____________________________________特此分享
  • 然后,通过搭建一个demo性质的平台,学习Vue.js2.0在项目中的应用,主要内容涵盖如何使用脚手架初始化项目,如何布局整个项目目录,如何使用Vue指令,如何设计使用组件,如何使用vue路由,vue数据请求等等,是一门...
  • VUE 快速入门(基于IDEA)

    千次阅读 2019-03-14 10:53:52
    vue入门 vue基础知识介绍 node.js Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非...
  • vue教程 pdf vue权威指南

    千次阅读 2018-11-19 16:51:44
    官方的文档内容比较多且杂,对于初学者来说可能没有系统性的引导,可以查看明灯小站的基础教程,对一些常用的基础语法都进行了整理,还可以在线进行调试。 好了,如果你对基础语法有一定的了解了,那就可以开始我们...
  • Vue.js 入门教程

    万次阅读 2018-04-20 15:49:22
    Vue.js 教程Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。MVVM...
  • Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化。 <!-- ...
  • Vue3快速入门教程

    千次阅读 2020-12-29 02:22:23
    i) in list">数据是{{item}},它在数组里的下标是{{i}}p> div> <script src="https://unpkg.com/vue@next">script> <script> Vue.createApp({ data() { return {list:[1,2,3,4,5]} } }).mount('#app') script> body> ...
  • 2020最新-Vue ElementUi入门实战视频教程.txt2020最新-Vue ElementUi入门实战视频教程.txt2020最新-Vue ElementUi入门实战视频教程.txt2020最新-Vue ElementUi入门实战视频教程.txt2020最新-Vue ElementUi入门实战...
  • Ant Design Vue快速入门教程

    千次阅读 2020-11-04 07:42:16
    Ant Design Vue Ant Design是蚂蚁金服出品的一款前端UI库,官方的介绍是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。简而言之就是一款简洁...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,304
精华内容 6,521
关键字:

vue教程入门

vue 订阅