新建立的了一个交流群,欢迎在工作的开发者,尤其是VUE和小程序的同志们 771402271

好久没更新博客,确实是自己已经懒癌晚期,最近毕业刚工作3个月,公司开发一直在用Vue,自己个人也比较喜欢这个框架,今天就对自己学习到和用到的知识点作一些总结,希望能帮到大家。

Vue

  知道Vue也一定听说过react 和 angular ,相对于这两个框架来说,Vue很轻量,打包后体积只有20K+,同时学习起来也比较简单,Vue借鉴了两个框架的很多优点。当然框架没有说最好,只有最适合,建议多学习尝试。

  众所周知Vue是一个MVVM框架,这里的MVVM指的仅仅是前端,和后端无关。在MVVM框架中,视图和数据不能直接通信,而是通过中间人ViewModel,ViewModel它可以监听到数据的变化,然后通知视图做更新。同时它也可以监听到视图在改变,使数据改变。我们看下面的例子就大概懂了。

举例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
// 这是我们的View 视图
     <p  id="app">{{ message }}</p> 
    <input type="text" v-model="message"/> //输入框,绑定了数据message
    </body>
<script src="js/vue.js"></script> // 引入vue 自行下载
<script>
// 这是我们的Model
var obj = {
message: 'Hello World!'
}
// 声明一个 Vue 实例 ,即 "ViewModel",实例中传入一个对象,用来连接 View 与 Model
new Vue(
el: '#app', // 将id为app的dom节点放进来,即建立了与视图view的连接。
data: obj    // obj放入到实例的data属性中, 此时建立与数据model的连接。
     })
// 这样就可以同时监听view和model了, 当更改message的时候,view会自动改变,同时当我们更改文本框的值的时候,会发现P标签里的值也在同时改变,这个时候就是view被监听使model改变。 这就实现了数据的双向绑定。
 </script> 

</html>

常用语法

# 文本插值

// 绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。
<span>Message: {{ msg }}</span>
<span v-text="msg"></span> // 也可以用指令的方式

#常用指令

指令 (Directives) 是带有 v- 前缀的特殊属性。其实就是一种命令,或者是规则。

v-if    v-else-if    v-else: 满足某个条件的时候显示。

   <body>
<div id="app">
<h1 v-if="age > 50">Yes!</h1> //当年龄大于50的时候才渲染这个标签
  <h1 v-else-if="age > 20 && age < 50">{{age}}</h1> // 当年龄大于20且小于50的时候渲染当前标签
       <h1 v-else>Yes!</h1> // 其他的情况渲染此标签
</div>
</body> <script>
var vm = new Vue({
el: '#app',
data: {
age: 80
}
})
</script> // v-if 可单独使用,也可和v-else-if v-else 一起使用,来控制不同情况下的视图。

v-show:简单的切换 display:block 和 none, 和 v-if不同。带有v-show的元素始终会被渲染

<h1 v-show="yes">Yes!</h1> // 如果yes为真就显示,为假就不显示

 var vm = new Vue({
el: '#app',
data: {
yes: true
}
})

总结: v-show适用于两种状态的切换,v-if适用于条件判断。

v-for指令:用于循环

<div id="app">
<todo-item v-for="item in groceryList" >{{item.text }}</todo-item>
</div> var app7 = new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其他什么人吃的东西' }
]
}
})

v-bind指令

v-bind指令可以在后面带一个参数,中间用冒号隔开,这个参数一般是HTML的属性,比如v-bind:class ,可缩写为:class,这个class和原来的class 并不冲突。

.show{
  display: block;
}
<h1 class="center" v-bind:class="yes ? show : off">Yes!</h1> // 如果yes为真就添加名为show的class,反之添加off var vm = new Vue({
el: '#app',
data: {
yes: true
}
})

v-on指令

专门用于绑定事件的指令,用法和v-blind差不多,比如添加点击事件< a v-on:click="方法名 / 执行语句"> ,可直接缩写为@click,可直接绑定一个方法,也可以直接使用内联语句

 #修饰符

修饰符 修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀,指明一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件的时候阻止默认事件:

<form v-on:submit.prevent="onSubmit"></form>

#计算属性computed:在正常情况下,代码中可以直接进行简单的运算,但是如果太多就显得难以维护。而计算属性就是将这个逻辑提取出来,专门来维护。如下例子:

<div id="example">
{{ message.split('').reverse().join('') }}
</div>
<div id="example">
<p>{{ message }}"</p>
<p>{{ reversedMessage}}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})

#方法methods:可实现和计算属性一样的功能

<div id="example">
<p>{{ message }}"</p>
<p>{{ reversedMessage}}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})

方法和计算属性区别:

计算属性存在缓存,只有依赖的变量发现改变的时候才会重新求值,如上,只有message发生改变才会重新求值,而methods每次渲染都会重新执行。所以要根据业务来选择。

#观察watch 

只有一个一个监听数据,只要这个数据发生变化,就会在返回两个参数,第一个是当前的值,第二个是变化前的值,每当变化的时候,则会触发函数体的里的逻辑行为,来进逻辑后续操作

watch: {   监听message的变化,若改变执行以下语句
message(new,old) {
//要执行的语句
}
}

#过滤器

过滤器在开发中会经常用到,比如我们要显示一个日期,但是后端给我们的数据是像这样的3463782000时间戳,我们就必须做以下转换。例如:

{{ message | date}}  // date在这里就是个过滤器。实际上就是一个函数,函数的第一个参数就是 | 前面的message,也就是说message会被当做参数传入到date函数中进行处理,返回的结果就是最终显示的结果,注意过滤器函数都必须有返回值。

new Vue({
filters: {
   date: function (date, fmt) {
  if (!date) {
  return 'timestamp can not be null or undefined';
  }
  date = new Date(date);
  if (isNaN(date.getFullYear())) {
  return 'dateError';
  }
  if (/(y+)/.test(fmt)) {
  fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  const o = {
  'M+': date.getMonth() + 1,
  'd+': date.getDate(),
  'h+': date.getHours(),
  'm+': date.getMinutes(),
  's+': date.getSeconds()
   };
  for (const k in o) {
  if (new RegExp(`(${k})`).test(fmt)) {
  const str = o[k] + '';
  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
  }
  }
  return fmt;
}
}
}) // 过滤器也可以串联.如 {{message | filterA | filterB}} message会当做参数传给filterA,处理完返回的结果又会当做参数传入filterB,处理完返回的就是最终结果了 过滤器分全局和局部。全局就是整个项目都可以用到,具体自行百度。

#混合mixins:

我们知道vue实例中会传入一个对象,里面有方法,计算属性等,假如有两个vue实例,他们有很多公用的东西,那么就可以用到混合了,混合可以当做一个Vue实例,同时它又可以和任何一个

对象进行组合。如下: am 和 vm 都需要使用方法foo,这个时候就可以声明一个混合来复用。

var mixin = {  // 声明一个混合
methods: {
foo: function () {
console.log('foo')
}
}
} var vm = new Vue({
mixins: [mixin], // 引用混合
methods: {
bar: function () {
console.log('bar')
}
}
}) var am = new Vue({
mixins: [mixin],
methods: {
conflicting: function () {
console.log('from self')
}
}
})
#给一个对象注册一个不存在的属性
假如我们需要监听对象下某个不存在的属性,那么我们可以通过set去创建。
全局注册: vue.set(item, 'checked', true)   item.checked = true
局部注册: this.$set(item, 'checked', true)

 #组件之间的通信

组件的基础就暂且不说了,看官方也能懂,直接说下通信,组件之间,有时候需要传递数据或者数据的状态,比如我这边点了按钮,需要父组件得到并且做出一定的改变。所以组件之间需要通信。

这个时候就分三种情况:父组件传递消息给子组件, 子组件传递消息给父组件,兄弟组件之间通信

1 父组件传递数据给子组件props

父组件
<child message="hello!"></child> // 子组件在父组件内被调用,message是来自于父组件的数据,直接以属性的形式传递
子组件 需要声明props属性来接收数据,数据可以和data里的数据一样使用
Vue.component('child', {
// 声明 props
props: ['message'],
})

2  子组件传递信息给父组件:例:当点击按钮时,通知父组件

父组件

<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter> // 子组件调用被监听派发出的时间increment,监听到后调用incrementTotal方法
<button-counter v-on:increment="incrementTotal"></button-counter>
</div> new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () { //若传递过来有数据,可以直接接收incrementTotal(value)
this.total += 1
}
}
})
子组件:
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1
this.$emit('increment') // 派发事件increment,第二个参数可以是想传递的数据 比如 this.$emit('increment', 1)
}
},
})
注意: 在子组件中不要直接更改props的值,不推荐也不支持,想要用可以直接赋值给一个变量,或者用计算属性,如果需要改变父组件这个值怎么办呢,就可以利用watch监听传来的props数据,然后把这个数据赋给一个变量,
这样我们就可以操作这个变量,再$emit派发事件把想要改变的数据传给父组件,父组件再监听。 3 兄弟组件通信
var bus = new Vue()  声明Vue实例

bus.$emit('id-selected', 1)   // 派发事件和数据

bus.$on('id-selected', function (id) {  // 监听事件,并在回调函数中,接受传来的数据。
// ...
})
 

先说到这里。。。。。

Vue使用总结的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  6. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  7. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  8. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. 初探Vue

    Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...

随机推荐

  1. Keil报错failed to execute 'd:\Keil\C51\BIN\C51.EXE'

    关于老师发的keil软件报错如下: --- Error: failed to execute 'd:\Keil\C51\BIN\C51.EXE' 错误是因为老师直接拷贝的安装目录,里面的文件路径设置仍 ...

  2. plsql developer 恢复默认布局界面

    tools-preferences-appearance-(reset docking,reset toolbars)

  3. tomcat配置不用访问工程名

    <Host name="localhost" appBase="/server/webapps" unpackWARs="true" ...

  4. mapreduce运行机制

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt243 谈mapreduce运行机制,可以从很多不同的角度来描述,比如说从ma ...

  5. java常见面试题(二)

    1.java集合类 Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素(Elements).JavaSDK不提供直接继承自Collect ...

  6. hdu 3342 拓扑排序 水

    好久没切题  先上水题! 拓扑排序! 代码: #include<iostream> #include<cstdio> #include<cstring> using ...

  7. 0908期 HTML 样式表属性

    1.背景与前景    /*背景色,样式表优先级高*/ background-image:url(路径);    /*设置背景图片(默认)*/ background-attachment:fixed;  ...

  8. NHibernate教程(21)——二级缓存(下)

    本节内容 引入 使用NHibernate二级缓存 启用缓存查询 管理NHibernate二级缓存 结语 引入 这篇我还继续上一篇的话题聊聊NHibernate二级缓存剩下的内容,比如你修改.删除数据时 ...

  9. 交叉编译器安装 gcc version 4.3.3 (Sourcery G++ Lite 2009q1-203)

    安装环境    :ubuntu 14.04 安装包       :toolchain.tar.gz 编译器版本:gcc version 4.3.3 (Sourcery G++ Lite 2009q1- ...

  10. 201521123082 《Java程序设计》第11周学习总结

    201521123082 <Java程序设计>第11周学习总结 标签(空格分隔):java 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. Answe ...