乱七八糟的vue.js学习笔记

发表于 | 分类于 | 阅读次数 |

之前学习vue.js的时候逛了很多网站，不仅看官方文档，还看了好多入门文章，学习视频，学的有点混乱，笔记也乱七八糟的，要整理起来好像很麻烦，w(ﾟДﾟ)w emm…先这样吧，把大部分的东西放上来，然后再慢慢整理吧~(:з」∠)

Vue.js

首先抛个官网和手册

官网

手册

vue.js介绍

摘自官方网站的vue.js介绍：

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。

与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

Vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

其他一些简单介绍：

  • 轻量级的mvvm框架

  • 一个mvvm框架(库)，和angular类似

  • 比较容易上手、小巧

vue和angular区别

vue：

  • 简单、易学
  • 指令以 v-xxx
  • 一片html代码配合上json，在new出来vue实例

  • 个人维护项目

  • 适合: 移动端项目,小巧
  • vue的发展势头很猛，github上start数量已经超越angular

angular：

  • 上手难
  • 指令以 ng-xxx
  • 所有属性和方法都挂到$scope身上

  • angular由google维护

  • 合适: pc端项目

两者共同点: 不兼容低版本IE

vue基本雏形

angular展示一条基本数据:

		var app=angular.module('app',[]);

		app.controller('xxx',function($scope){	//C
			$scope.msg='welcome'
		})

html: ```
	div ng-controller="xxx"


vue展示一条基本数据:


	var c=new Vue({
		el:'#box',	//选择器  class tagName
		data:{
		    msg:'welcome vue'
		}
	}); ```
html: ```
		<div id="box">
			
		</div> ```

一个简单的vue.js

html 页面

<div id="demo">
  <p></p>//双括号：常用模板渲染方式
  <input v-model="messag">//将message字段关联到input的value
</div>

js文件

var demo = new vue({
	el:"#demo",
	data: {
	message:"hello vue.js!"
	}
})

显示的页面：

Hello Vue.js!

input框，值：Hello Vue.js!

修改input框里的值的时候，p标签里面的值也会跟着改变

这是一种双向绑定的实现

双向绑定：

1.页面上的输入会绑定到js里面的message里面

2.js里面的改变也会体现在调用message的页面部分

vue体现的是一种组件的模式

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独

立和通常可复用的组件构建大型应用。

vue的安装

vue的安装用npm

npm install vue

命令行工具cli

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project(你的项目名称)
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

npm安装速度超级慢，可以使用淘宝 NPM 镜像代替

安装淘宝镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

可以使用定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

vue的结构

new Vue({
	data:{              //vue里的所有数据都写在data里
	    a:1,
	    b:[]
	},
	methods:{           //methods是方法，所有的方法都可以取到data里面的数据
	    doSomething:function(){
			this.a ++
		}
	},
 	watch:{             //watch是监听，数据改变后的一种操作，这里是打印了a新的值和旧的值
	    'a':fuction (val ,oldVal){
	     console.log(val,oldVal)
		}
	}
})

小结：

  • new一个vue对象的时候你可以设置它的属性，其中最重要的包括三个，分别是data，methods，watch
  • 其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法。

vue框架

  • vue里面的index.htnl有一个app的标签，这个标签是一个组件
  • app的组件写在src的mian.js里面

import是ES6语法

import App from './App' //App这个组件引入来自同级目录下的App.vue

上面这种写法等同于

var App = require （'./App'）

export default也是ES6的语法 相当于module.export={}

vue里面的组件必须注册才可以使用

data(){return{}}

相当于

fuction data(){
  return{}
}

模板指令v-html和vue对象的粘合剂

数据渲染

  • v-text
  • v-html
  • ``
<p></p>

<p v-text="a"></p>
<p v-html="a"></p>

new Vue({
  data:{
    a:1,
    b:[]
  }
})

模板指令

  • v-if
  • v-show

控制模板隐藏

<p v-if="isShow"></p>     //直接不渲染
<p v-show="isShow"></p>  //通过css的display-none来控制

new Vue({
  data:{
   isShow:true
  }
})

渲染循环列表 v-for

<ul>
  <li v-for='item in items'>      //itemi和tems都是可改的，这里是指取data中的items对象
    <p v-text='item.lable'></p>  //lable可改，取的是items里面的lable
  </li>
</ul>

new Vue({
	data：{
	  items:[
	    {
	      label:'apple'
	    },
	    {
	      lable:'banana'
	    }
	  ]
	}
})

事件绑定 v-on

<button v-on:click="dothis"></button>

简写成

<button @click="doThis"></button>

new Vue({
  methods:{
    doThis:function(someThing){

    }
  }
})

v-on:click=”函数”

v-on:click/mouseout/mouseover/dblclick/mousedown…..

例子：

		new Vue({
			el:'#box',
			data:{ //数据
			    arr:['apple','banana','orange','pear'],
			    json:{a:'apple',b:'banana',c:'orange'}
			},
			methods:{
			    show:function(){	//方法
			        alert(1); 
		//添加数据：this.arr.push('tomato');
			    }
			}
		});

拓展

事件:

v-on:click/mouseover......

简写的:

@click=""		推荐

事件对象:

	@click="show($event)"  //点击页面不同地方返回不同参数

在methods中

	methods:{
		show:fuction(ev){  //ev 任意
			alert(ev.clientx);
		}
	}

事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推荐

默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐 //contextmenu右键效果

键盘类事件:
@keydown $event ev.keyCode // 点击显示键码
@keyup
常用键:
回车
a). @keyup.13 //13是回车的键码
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....

属性绑定 v-bind

<img v-bind:src="imgeSrc"> //字符串
<div v-bind:class="{red: isRed }"></div>

简写成：

<div :class="{red: isRed }"></div> //key red指的是class的名字，red后面是对class的是否展现一个判断，是一个布尔值
<div :class="[classA, classB]"></div> //class里面是一个数组，vue里面是一些字符串
<div :class="[classA, {classB: isB, classC:isC}]"></div>//classA是字符串，classB和classCss是来判断class是否展现。

例子：

<div id="app-5">
  <p></p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>


var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

拓展

class和style:

  • :class=”” v-bind:class=””

  • :style=”” v-bind:style=””

    :class=”[red]” 这个red是指data中的数据 :class=”[red,b,c,d]”

    :class=”{red:a, blue:false}” 指的是css里的red，用false和true实现

    :class=”json”

      data:{
      json:{red:a, blue:false}
  }  官方推荐用json   --------------------------   style:   :style="[c]"   :style="[c,d]"
  注意:  复合样式，采用驼峰命名法 比如background-color 变成 backgroundColor   :style="json"

双向绑定 v-model

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
  <p></p>
  <input v-model="message">
</div>


var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

拓展

			数据更新模板变化
		数据只绑定一次
	
	}	HTML转意输出

小结：

  • vue对象里的设置通过html指令进行关联
  • 重要的指令包括 数据渲染:v-text 控制显示 v-if 绑定事件 v-on 循环渲染 v-for 双向绑定 v-model

vue实例学习

v-model

预期：随表单控件类型不同而不同。

限制：

  • <input>
  • <select>
  • <textarea>
  • components

修饰符：

  • .lazy - 取代 input 监听 change 事件
  • .number - 输入字符串转为数字
  • .trim - 输入首尾空格过滤

用法：

在表单控件或者组件上创建双向绑定。细节请看手册教程链接。

参考：

  • 表单控件绑定
  • 组件 - 在输入组件上使用自定义事件

v-text

预期：string

详细：

更新元素的 textContent。如果要更新部分的 textContent ，需要使用 插值。

示例：

HTML<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span></span>

参考：数据绑定语法 - 插值

v-html

预期：string

详细：

更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，不要在用户提交的内容上使用。

示例：

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

v-text和v-html两者区别： v-text会把对象全部渲染出来，而v-html会把html标签或者html语言进行转换

组件

如何划分组件

  • 功能模块-select，pagenation…
  • 页面区域-header,footer,sidebar

vuejs组件之间的调用

需要通过component来注册组件

首先需要引用进需要的组件

import Header from './header'

import Footer from './footer'

new Vue({
  data:{
  isShow:true
  },

  components:{
  Header,Footer  //通过component来注册组件
  }
})

vue组件之间的通信

父组件往子组件传参

header.vue

new Vue({
  data:{
   username:'xxx'
  },
  props:['msg'], //必须包含msg，否则传不到
  methods:{
    doThis:fuction(){
      console.log(this.msg)
    }
  }
})

app.vue

<header msg='something interesting'></header>
<footer></footer>

子组件往父组件传参

app.vue

<component-a msgfromfather='you die!' v-on:chid-tell-me-something=''></component-a>

一些零碎的知识点：

window.localStorage.setItem
window.localStorage.getItem

  • 新建一个store.js的文件

  • 里面是localStorage的fetch方法和save方法

  • 在app.vue的script的标签中import Store from ‘./store’

console.log

主要是方便你调式javascript用的。你可以看到你在页面中输出的内容。

相比alert，console.log的优点是：

1.他能看到结构话的东西，如果是alert，淡出一个对象就是[object object],但是console能看到对象的内容。

2.console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。

3.console里面的内容非常丰富，你可以在控制台输入：console，然后就可看到

$emit

监听事件用 @+事件名称

组件命名时，js是大小写敏感，html不是，驼峰写法的每一个大写字母都会被转换成-

例如componentA 变成 component-a

ComponentA之所以要转换成component-a，

因为在HTML中，标签的标签名是大小写不敏感的，而在javascript中变量名是大小写敏感的

换句话说，在HTML中，ComponentA和componenta算是同一个标签

而在javascript中，ComponentA和componenta却不是同一个变量

要解决这种差异问题，就必须得在两种标准之间做一个转换，所以vuejs的作者就实现了将驼峰法(camelCase)转换到短横线法(kebab-case)

github上一份别人总结的注释

Vue2.0_to_do_list-addName