vue学习笔记

最新推荐文章于 2022-09-27 16:05:05 发布

AndCo

最新推荐文章于 2022-09-27 16:05:05 发布

阅读量459

点赞数

分类专栏：前端框架文章标签： vue

本文链接：https://blog.csdn.net/AndCo/article/details/79458254

版权

前端框架专栏收录该内容

4 篇文章 0 订阅

订阅专栏

`this`的作用域

在函数内部this作用域表示函数本身

/**
 Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
*/
var vm=new Vue({//Vue 实例中
  el："#app",//监听范围
  date:{//数据对象
    list:""
  },
  filter:{//过滤器
    formateMoney:function(value){
        return "$"+value.toFixed(2);
    }
  },
  mounted:function(){//钩子函数
    this.cartVew();  
     this.$nextTick(function () { //$nextTick后确保dom渲染完成
       vm.cartVew();
    })
  },
  methods:{//定义方法
        vartView：function(){
        var _this=this;
          //vue-resource插件(这里this表示vue实例 this.$http 是调用vue-resource插件的方法 ，vue已经包含了vue-resource)
          //vue-resource推荐用axios代替
          this.$http.get("data/cartdat.json",{"id:"2}).then(function(){
            //this.createView();//this的作用域已经发生变化
            _this.list='aa';
          }); 
        }
  }   
});
//全局过滤器,可以在任意页面来使用
Vue.$filter("money"，function(value,type){
  return "$"+value.toFixed(2)+type;
})

`=>`用法介绍(es6语法)

vartView：function(){
        var _this=this;
        this.$http.get("data/cartdat.json",{"id:"2}).then(function(res){
            //this.createView();//this的作用域已经发生变化
            _this.list=res.body.list;
          }); 
        }

//下面用=>箭头函数代替上面的写法
vartView：function(){
          this.$http.get("data/cartdat.json",{"id:"2}).then(res=>{
     //如果用=>函数，this的作用域不会发生改变，这样就不需要将原有this保存下来。可以直接用this拿到外层的方法和属性
          this.list=res.body.list;
          );           
        }  
    }
 //由上可以看出 res=>{} 可以认为是 function(res){}  res作为参数=>表示function函数,但是函数内部this的作用域已经指向外层

`ready` 替换

使用新的 mounted 钩子函数替代。应该注意的是，使用 mounted 并不能保证钩子函数中的 this.el 在 document 中。为此还应该引入 Vue.nextTick/vm.el 在 document 中。为此还应该引入Vue.nextTick\vm.nextTick`。例如：

mounted: function () {
  this.$nextTick(function () {
    // 代码保证 this.$el 在 document 中
  })
}

`v-bind` 缩写

//动态绑定属性
<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

`v-on` 缩写

//动态绑定方法
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

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

`Vue`的生命周期

lifecycle

`v-for`指令

<!-- item 遍历项 index 索引  addressList 数据集合-->
<li v-for="(item,index) in addressList | limitBy 3">
  <di>{{item.userName}}</di>
</li>

<!-- 2.0中已经不再使用以上过滤器,用以下方式代替-->
<li v-for="(item,index) in filterAddress" v-bind:class="'check':index==currentIndex"
    @click="currentIndex=index">
  <di>{{item.userName}}</di>
</li>

<!--在界面中{{}}调用vue变量不需要使用this-->

computed:{//实时计算
  filterAddress:function(){
    return this.addressList.slice(0,3);//截取0到3
}
}

`v-bind(:)` 和`v-on(@)`结合使用

<!-- 实现点击选中 -->
<ul>
    <li :class="{'check':shippingMethod==1}" @click="shippingMethod=1"/>
    <li :class="{'check':shippingMethod==2}" @click="shippingMethod=2"/>
</ul>

Axios(JS HTTP库/Ajax库)

特征

比Jquery轻量，但处理请求不多的时候，可以使用
基于Promise语法标准
支持nodejs
自动转换JSON数据

用法

get

// Make a request for a user with a given ID
axios.get('/user?ID='+USER.ID)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//或者利用params属性传递参数
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });1234567891011121314151617181920

post

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

同时处理多个请求(基于Promise语法标准)

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (account, permission) {
    //all 会等到所有请求都完成,
  }));

关于vue的npm run dev和npm run build(点击进入原文)

关于vue的npm run dev和npm run build

├─build
│   ├─build.js
│   ├─check-versions.js
│   ├─dev-client.js
│   ├─dev-server.js
│   ├─utils.js
│   ├─vue-loader.conf.js
│   ├─webpack.base.conf.js
│   ├─webpack.dev.conf.js
│   ├─webpack.prod.conf.js
│   └─webpack.test.conf.js
├─config
│   ├─dev.env.js
│   ├─index.js
│   ├─prod.env.js
│   └─test.env.js
├─...
└─package.json
以上是关于bulid与run的所有文件

指令分析

package.json里面

“dev”: “node build/dev-server.js”,

“build”: “node build/build.js”,

意思：运行”npm run dev”的时候执行的是build/dev-server.js文件，

运行”npm run build”的时候执行的是build/build.js文件。

build文件夹分析

build/dev-server.js

npm run dev 执行的文件build/dev-server.js文件，执行了：

检查node和npm的版本
引入相关插件和配置
创建express服务器和webpack编译器
配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）
挂载代理服务和中间件
配置静态资源
启动服务器监听特定端口（8080）
自动打开浏览器并打开特定网址（localhost:8080）

说明： express服务器提供静态文件服务，不过它还使用了http-proxy-middleware，一个http请求代理的中间件。前端开发过程中需要使用到后台的API的话，可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。

build/webpack.base.conf.js

dev-server依赖的webpack配置是webpack.dev.conf.js文件，

测试环境下使用的是webpack.prod.conf.js

webpack.dev.conf.js中又引用了webpack.base.conf.js

webpack.base.conf.js主要完成了下面这些事情：

配置webpack编译入口
配置webpack输出路径和命名规则
配置模块resolve规则
配置不同类型模块的处理规则

这个配置里面只配置了.js、.vue、图片、字体等几类文件的处理规则，如果需要处理其他文件可以在module.rules里面配置。

build/webpack.dev.conf.js

在webpack.base.conf的基础上增加完善了开发环境下面的配置，主要包括下面几件事情：

将hot-reload相关的代码添加到entry chunks
合并基础的webpack配置
使用styleLoaders
配置Source Maps
配置webpack插件

build/check-versions.js和build/dev-client.js

最后是build文件夹下面两个比较简单的文件，

dev-client.js似乎没有使用到，代码也比较简单，这里不多讲。

check-version.js完成对node和npm的版本检测

build/utils.js和build/vue-loader.conf.js

webpack配置文件中使用到了utils.js和vue-loader.conf.js这两个文件，utils主要完成下面3件事：

配置静态资源路径
生成cssLoaders用于加载.vue文件中的样式
生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件

vue-loader.conf则只配置了css加载器以及编译css之后自动添加前缀。

build/build.js

构建环境下的配置，

build.js主要完成下面几件事：

loading动画
删除创建目标文件夹
webpack编译
输出信息

build/webpack.prod.conf.js

构建的时候用到的webpack配置来自webpack.prod.conf.js，该配置同样是在webpack.base.conf基础上的进一步完善。主要完成下面几件事情：

合并基础的webpack配置
使用styleLoaders
配置webpack的输出
配置webpack插件
gzip模式下的webpack插件配置
webpack-bundle分析
说明： webpack插件里面多了丑化压缩代码以及抽离css文件等插件。

config文件夹分析

config/index.js

config文件夹下最主要的文件就是index.js了，

在这里面描述了开发和构建两种环境下的配置，前面的build文件夹下也有不少文件引用了index.js里面的配置。

config/dev.env.js、config/prod.env.js和config/test.env.js

这三个文件就简单设置了环境变量而已，没什么特别的。

vue组件之间通信实录(点击进入原文)

1、在vue中父组件是通过props传递数据给子组件

<child-component :prop1="父组件的数据1" :prop2="父组件的数据2"></child-component>

子组件只接受在子组件中定义过的props的值，

Vue.component('child-component', {
  props: ['prop1', 'prop2'], // 定义接收哪些 props
  template: '<div>{{prop1 + prop2}}</div>',
  ...
}

2、父组件调用子组件属性或方法

首先在组件的根元素上通过ref给取个名字，例如：

<child-component ref="aName"></child-component>

然后父组件就可以通过该名称获取到这个组件对象，从而调用里面的属性与方法：

var comp = this.$refs.name;
name.attr;
name.method();

父组件可以通过$children，获取到所有的直接子组件，不包括孙组件；不保证顺序，不是响应式的

3、子组件传递数据给父组件—-自定义事件

父组件通过v-on在子组件使用的地方监听子组件触发的事件：

<div id="counter-event-example">
  <p>{{ total }}</p>
//increment是子组件中的事件，意思就是在子组件中increment执行的时候，执行父组件中的incrementTotal方法
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function (arg) {
      this.total += 1
    }
  }
})

然后在子组件中使用$emit()主动抛出事件：

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
       //传递参数
       //this.$emit('increment',arg) 
    }
  },
})

当然如果你想在组件根元素上使用原生事件，可以使用.native修饰符
另外子组件调用父组件事件则可以使用 $parent或者$ root，详见vue文档；

4、兄弟组件之间通信

vue中兄弟组件之间的通信网上大部分说法都是使用vuex，但是对于小白来说，vuex的初始理解门槛还是有的，所以这里主要用事件巴士讲解一下。

一般在vue的开发中都是模块化开发，所以当涉及到兄弟组件之间的通信的时候，我们可以在入口文件中事先声明一个全局的事件巴士（即一个全局的供vue实例），然后通过他来传导数据。

// 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';
import FastClick from 'fastclick';
import router from './router';
import Vue_resource from 'vue-resource';
import axios from 'axios';
import './common/style/index.less';
Vue.config.productionTip = false;
FastClick.attach(document.body);
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    render: h => h(App),
    data: {
        eventHub: new Vue()
    }
});
router.push('/goods');

然后便可以全局的使用该实例，进行数据的传输，如下：

//在组件a中触发事件add，并且传递参数1
this.$root.eventHub.$emit('add',1);
//在组件b中监听事件的触发，并处理参数
this.$root.eventHub.$on('add',function(data) {
  //...
})

文档连接

webPackage https://doc.webpack-china.org/guides/getting-started

smui http://osfp.sf-express.com/docs/#/zh-cn2

sfopen http://osfp.sf-express.com/1?page_id=76

AndCo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue学习笔记

this的作用域在函数内部this作用域表示函数本身/** Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来*/var vm=new Vue({//Vue 实例中 el："#app",//监听范围 date:{//数据对象 list:"" }, filter:{//过滤器 formateMoney:fun...
复制链接

扫一扫