vue-（1）认识vue

1、认识Vue

Vue是一个渐进式框架

core+Vue-router+vuex

2、Vue.js安装

方式一：直接CDN引入

方式二：下载和引入

开发环境：https://vuejs.org/js/vue.js
生产环境:https://vuejs.org/js/vue.min.js

方式三：npm 安装（推荐）

后续可用webpack和cli的使用

步骤，去Vue官网中找到开发版本，然后下载文件，引用；

3、体验

let:变量 const：常量

div#app 快捷键

//编程范式：声明式编程
<div id="app">{{message}}</div>
//引用Vue.js
<script src="../js/vue.js"></script>
//调用Vue.js中对象
<script>
 const app =new Vue({  
    el:'#app' ,//用于挂载要管理的元素
    data:{
    	message:'xxx'
    }，
    methods:{
    	add:function(){
    		console.log('add函数方法')
    		//使用data中变量，需要用this,表示当前对象
    		this.message
    	}
    }
    })
</script>

3.1、Vue知识点

1、ul、li标签；

2、m v vm ：模型-视图-VueMoudel（数据绑定，dom监听）

3、创建Vue实例传入的options

el:类型String|HTMLElement,作用：决定之后Vue实例会管理哪一个DOM

data：Object、Function；作用：Vue实例对应的数据对象。

methods：{【key:String】:Function};作用：定义一些属于Vue的方法，可以在其它地方调用，也可以在指令中使用；

4、Vue的生命周期

5、代码规范，缩进2个空格会更好一些

6、v-bind（缩写 ：）动态绑定属性

7、bind动态绑定class

设置布尔值

v-bind:class="{active:isActive}"
data中  isActive:true

注意：调用方法得加小括号

8、：style动态绑定styte属性值

<h2 :styte="{fontSize:'50px'}"></h2>

调用函数： ：styte=“getxxx()”

4、插值操作

Mustache语法（也就是双大括号）单词翻译胡子、胡须

4.1、v-cloak（了解）

如果网络卡了，会出现散动效果，所以处理方法是加上延迟

setTimeout(   function(){},1000  )//延迟1s

在Vue解析前，div中有一个属性v-cloak

在Vue解析之后，div中没有一个属性v-cloak

在style样式中新增

[v-cloak]{display:none}

5、v-bind 使用

<li  v-for="(item,index) in list"  >
				<button :class="{active:dex==index}" v-on:click="bt(index)">{{item}}-{{index}}</button>			
			</li>
			
active:'active',
		   dex: null,
		   
bt:function(index){this.dex=index}

二

1、块级作用域let-var

es5中没有块级作用域

2、const的使用

在es6中，优先使用const，只有需要修改时才使用let

方法简写
//es6之前
let obj1 = {
	test:function(){xxx}
}
//es6之后
let  obj2  ={
    test(){xxxx}
}

3、v-on

作用：绑定事件监听器

可以简写 @

什么时候加括号，什么时候不加？？？

<button v-on:"method"></button>

3.1、v-on传值

如果函数需要形参没值，会是undefined

method（）{xxx}

默认的event

3.2、v-on修饰符

v-on：keyup==@keyup

私人的

@click.prevent

4、v-if、v-else-if、v-else

一般使用，不建议

<h2 v-if="sorce>10">好</h2>

建议方法，在方法中写

result(){
let show='';
if(this.score>10){xxx}
}

5、v-show

显示问题，v-if：不存在时不在dom中显示

v-show：不存在时在dom中显示

当需要显示与隐藏切换频率很高，使用v-show

6.控制台插入值

splice 插入中间值

普通的插入性能会比较慢

7、Vue.set()

Vue.set(this.list,0,‘aaa’)

8、购物车

1、table标签

table\thead\tr\th

2、filtters过滤器

会自动将参数data传入过滤器

<td>{{litem.data | showP}}

filters:{
	showP(data){xxx}
}

三

1、v-model

<input type="text" v-model="message">

等同于

v-bind:value="message" v-on:input="massage =$event.target.value"

四

1、类型

parseFloat（）：转float类型