1.安装Vue
在Vue的官方网站下载vue.min.js文件，并用script标签引入
或者借助CDN(内容分发网络)来引入文件
<script src="http://cdn.bootcss.com/vue/2.6.10/vue.min.js">
定义视图 ：通过v-model指令实现vue的双向数据绑定：model<=>view
绑定事件：@click="自定义方法"
在视图中通过管道运算符“|”调用过滤器对象里定义的过滤器 即：{{数据参数名 | 过滤器名}}，如：{{words | transformForm}}
自定义方法语法:
methods:{ 方法名：function(参数列表){} }
例如：
methods:{
changes:function(){ this.changeMsg(); },
注意： 在vue实例里面访问vue对象里的属性直接使用this指针，但是要注意如果里面包含了其他对象需要考虑的this指针的指向，this指向vue实例对象
函数：
创建前:只注入事件和生命周期钩子函数，不能访问data和el虚拟DOM
beforeCreate:function(){
console.log("实验创建前");
console.log(this.message);
console.log(this.$el);
},
//创建完成：注入data数据，没有注入el
created:function(){
console.log("实验创建完成");
console.log(this.message);
console.log(this.$el);
},
// 挂载之后，虚拟DOM已经替换原本的视图内容
beforeMount:function(){
console.log("实验挂载之前");
console.log(this.message);
console.log(this.$el);
},
// 挂载完成
mounted:function(){
console.log("实验挂载完成");
console.log(this.message);
console.log(this.$el);
},
// 修改了模型数据之前的触发
beforeUpdate:function(){
console.log("模型数据X更新之前");
console.log(this.message);
console.log(this.$el);
},
// 修改了模型数据时触发
updated:function(){
console.log("模型数据更新完成");
console.log(this.message);
console.log(this.$el);
},
beforeDestroy:function(){
},
destroyed:function(){
},
过滤器语法：filters:{过滤名:function(参数接收要过滤的数据值){}}
filters:{
transformForm:function(val){
//将字符串切割成数组
var arr=val.split(" ");
var result="";
for (var i = 0; i < arr.length; i++) {
result+=arr[i].charAt(0).toUpperCase()+arr[i].substring(1)+" ";
}
return result;
}
}
在vue实例外部访问实例里的属性时，需要实例变量.$属性名，如：console.log(vm.$data);
事件冒泡：当容器本身和容器内的子容器都绑定里事件的时候，当触发事件的源头为子容器是，会自动依次由内向外出阿发所有父容器的事件
各个事件：
阻止事件冒泡：@事件名.stop="方法名"
事件触发一次：@事件名.once="方法名"
触发源为本身才会触发本身事件：@事件名.self="方法名"
在底层event.target是不是添加self修饰符事件本身的标签，如果是就触发，否则不触发
阻止表单默认提交事件：@事件名.prevent="方法名"或在methods事件中的事件中加event.preventDefault();
事件捕获：@事件名.capture="方法名"，邮箱执行添加了事件捕获的事件，然后再回到触发源触发事件，由为向内去捕获
methods: {
saySelf: function (msg) {
console.log(msg);
},
msgSelf: function (str) {
// 阻止所有的事件冒泡
event.stopPropagation();
// 阻止所有的默认事件
event.preventDefault();
console.log(str);
},
},
event：事件参数：
dev: function () {
// event：事件参数,event.target:事件源
console.log(event);
this.restult = this.num1 / this.num2;
},
属性绑定对象型写法：动态绑定属性：“ v-bind:属性名="动态值" "等效于 “ :属性名="动态值" ”。例如：v-bind:class="index==0?'active':''"
v-if条件渲染语句的if-else-if必须连续的，中间不能隔标签，否则无效，如：
<div v-if="index==0">首页1的内容</div>
<div v-else-if="index==1">服装1的内容</div>
<div v-else="index==2">旅游1的内容</div>
data中绑定的值：
isBorder: true,
isShadow: true,
borderClass: "border",
shadowClass: "shadow",
classArr: ["border", "shadow"],
styleObj: {
width: "300px",
height: 100 + "px",
border: "1px solid red",
"margin-top": "50px",
backgroundColor: "aqua",
},
属性绑定数组型写法：
<div :class="{border:isBorder,shadow:isShadow}">box</div>
<div :class="[borderClass,shadowClass]">box</div>
<div :class="classArr">box</div>
style属性动态绑定:
<div :style="styleObj">style</div>
事件绑定：v-once（只会渲染一次），v-text、v-html（字符串变成html形式）、v-model(双向绑定)
函数事件：
split(" ")将字符串切割成数组，
join(" ")将数组拼接为字符串，
.reverse()将查到的字符或数组移除，
push()在数组末尾添加元素，
pop()数组末尾去除，
头部添加shift(),
头部去除unshift()
splice(删除的起始下标,删除的元素个数); 从指定下标处移除指定数量的元素
计算属性第一次获取到结果会存到缓存里，只要计算方法里依赖的数据可没有发送改变，多个地方使用同一个，计算属性放在computed
模糊查询：filter(function(过滤项){return bool;})：数组过滤方法，当返回的结果是TRUE时，代表当前过滤项是需要保留的,否则是需要过滤掉，底层也是执行了循环
fundItems: function () {
var _this = this;
return _this.items.filter(function (val) {
return val.indexOf(_this.wordKey) != -1;
});
}
v-for循环指令：
<li v-for="(book,index) in serarchName " :key="index">{{book}}</li>
wacth侦听属性：是一个对象，里面可以有多个数据侦听方法，一个方法只能侦听一个数据，但是一个侦听可以有多个操作，是一对多关系，其语法为
watch:{
data里的数据名:function(newVal新值,oldVal旧值){侦听的数据变化后的操作}
}
watch侦听在vue实例第一次加载的时候默认不会自动触发数据侦听;直接监听整个对象类型数据，每次触发都会将对象里的所有属性都遍历一遍，当只需要监听对象类型里的某个或某个数据变化时不推荐这种写法，采用监听对于的的属性
对象型数据和数组类型都是引用类型
computed与watch的区别
computed支持缓存，只要依赖的数据不发生改变不会再去调用计算方法；watch不支持缓存，每次不管数据是否改变都会调用计算方法
computed不支持异步改变数据，watch支持异步改变数据
computed主要用来返回一个依赖多个数据的就算结果；watch主要用来侦听的数据改变时触发某些操作
例如：
watch: {
proPice:{
handler:function(newVal,oldVal){
this.proTotal=parseFloat(newVal)*parseInt(this.proNum);
console.log(newVal);
console.log(oldVal);
},
// 解决vue实例第一次加载默认不触发数据侦听，加了immediate这个属性并且为TRUE第一次加载也会侦听
immediate:true,
},
深度监听对象类型的数据：当里面的任意属性值发生改变时也会触发
deep:true
"products.proPice":{
handler:function(newVal,oldVal){
this.proTotal1=parseFloat(newVal)*parseInt(this.products.proNum);
console.log(newVal);
console.log(oldVal);
},
immediate:true,
}
template模板：template模板里只能有一个根标签，所以一般在模板里写一对div标签，所有的内容都要放在这一对div标签里面去
<template id="">
<!-- 根标签div，所有内容都要写在div里 -->
<div>
</div>
</template>
使用script标签分离template模板：
<script type="text/x-template" id="">
</script>
组件：
<my-comp></my-comp>
components: {
// Vue实例创建是的属性在组件传递的options对象里大多数都可以使用，el挂载点属性在组件里不要使用
"my-comp": {
// 但是data属性的值必须是一个function，在function里返回一个数据对象，如果不这样做所有的data都会引用的是同一个数据实例对象
template: "#myComp",
},
全局注册
Vue.component("my-comp", myComp);
局部注册
components: {
// 注册组件（局部注册）
"my-comp": myComp,
},
父子组件： 组件在哪个父容器里注册的就只能在当前父容器里使用
注册父组件，
父组件传参：1、在父组件data里声明要传递的参数，
2、在使用子组件是键参数使用动态绑定v-bind：自定义属性名="要传递的参数" 绑定到子组件的标签上
3、在子组件的options中使用props属性介绍说传递的值，使用绑定是自定义的属性名接收就可以在子组件中使用 (注意：如果自定义的属性名使用的横杠连接在接收时要改为驼峰命名法：如post-title最后要写成postTitle)
注：prop的值如果是对象，语法：{属性名1：数据类型，属性名2：数据类型.....
props: {
nav: Array,
},
props的值是一个数组:["属性名1","属性名2"]
props: ["post-title", "staticValue", "childNav"],
创建组件 var myComp = Vue.extend({options}); options跟vue实例化的时候传入的对象基本一致，但是在组件注册里不需要写el挂载点，在组件注册里传入的data的值必须是一个函数function
var myComp = Vue.extend({
// 模板就是一对标签
template: " <h1>我的第一个vue组件</h1>",
});
var myComp1 = Vue.extend({
// 模板就是一对标签
template: " <h1>我的第一个局部vue组件</h1>",
});
注册组件Vue.component("组件标签名", 注册组件使用的模板);，组件的注册必须要在声明vue实例之前,全局注册的组件可以在所有的vue实例中使用
Vue.component("my-comp", myComp);
// 简化版本
Vue.component(
"my-comp2",
Vue.extend({ template: "<h1>合并版本的组件</h1>" })
);
Vue.component("my-comp3", { template: "<h1>合并简洁版本的组件</h1>" });
例如：
<template id="childComp">
<div>{{subMessage}}</div>
</template>
<template id="parentComp">
<div>
<h1 :class="{banner:isStyle}">
{{message}}
<child-component sub-message="不玩就out了"></child-component>
</h1>
</div>
</template>
components: {
"banner-componet": {
//创建并注册父组件
props: ["message", "isStyle"],
template: "#parentComp",
components: {
"child-component": {
// 创建并注册子组件
props: {
subMessage: String,
},
template: "#childComp",
},
},
},
},
子组件传递参数给父组件方法
1、在父组件里先定义好接收到子组件传递的数据后要执行的方法，在该方法里用形参接收子组件传递的实参
2、在父组件里使用子组件自定义标签名是，在标签名上使用时间绑定自定义的事件名称，在该事件名称上绑定定义好的接收到子组件传递的数据后要执行的方法。 如： <add-comp @chard="btnAdd"></add-comp>
3、在子组件数据准备好后使用：this.$emit("在父组件中使用子组件自定义标签名时，在标签名上使用时间绑定自定义的时间名称","子组件要传递的数据"); 如： this.$emit("chard", "传递的值");即：this.$emit("chard", this.pro);或this.$parent.父组件里的方法名("要传递的值");例如：this.$parent.btnAdd(this.pro);
默认插槽和具名插槽使用都是在自定义组件标签内部使用
默认插槽需要在子组件模板内写一对不带名字的<slot></slot>标签，会自定将自定义组件标签内容的内容填充到默认插槽
具名插槽需要在子组件模板内写一对带名字的 <slot name="名字"></slot>标签，在自定义组件标签内需要填充的内容标签上使用slot属性指定需要插入到的具名插槽位置，如：<div slot="名字">需要插入到子组件的内容</div>
作用域插槽
可以将子组件的数据通过插槽上通过动态数据绑定传递到父组件里使用，如： :list="值"
通过插槽传递的所有数据字父组件里通过作用域插槽slot-scope="自定义名"接收将会是一个对象，所有的数据都在这个对象里通过“对象名.属性名”获取 。如：<div slot="scopeSlot" slot-scope="props"> </div> props将以对象类型接收到该插槽上所有传递的值，props.frist和props.name1获取传递的值
例如：
<div id="app">
<regs-comp>
<h1>默认插槽的使用</h1>
<div slot="birthSlot">
<h4>具名插槽</h4>
<p>生日：<input type="text" /></p>
</div>
<div slot="addrSlot">
<h4>具名插槽</h4>
<p>地址：<input type="text" /></p>
</div>
</regs-comp>
<!-- 作用域插槽 -->
<scope-comp>
<div slot="scopeSlot" slot-scope="props">
<li>{{props.name1+1}}、{{props.first}}</li>
</div>
</scope-comp>
</div>
<template id="regsComp">
<div>
<!-- 默认插槽，有且只能有一个 -->
<slot></slot>
<p>账号： <input v-model="username" type="text" /></p>
<p>密码： <input v-model="pwd" type="text" /></p>
<p>确认密码： <input v-model="pwd1" type="text" /></p>
<!-- 具名插槽可以有任意多个 -->
<slot name="birthSlot"></slot>
<p>性别： <input v-model="sex" type="text" /></p>
<slot name="addrSlot"></slot>
</div>
</template>
<!-- 创建组件模板 -->
<template id="scopeComp">
<div>
<h1>作用域插槽的使用</h1>
<ul>
<slot
name="scopeSlot"
v-for="(fruit, index) in fruitList"
:first="fruit"
:name1="index"
></slot>
</ul>
</div>
</template>
扫一扫
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
