A:vue介绍
vue:是一套渐进式前端框架
1:渐进式框架:意思就是你可以只用我的一部分,而不是用了我这一点就必须用我的所有部分。
2:框架和库的区别:
a*:框架:字面上理解为架子,为用户提供一整套解决方案,必须按照他的规则来写;
b库:像函数一样,只需要调用他的方法,怎样组织由自己决定;
3:模板插值
vue使用双大括号语法来进行文本插值
<div id="app">
{{ message }}
</div>
4:构造器
每个vue应用都是通过构造函数vue来创造vue的根实例,实例化是需要传入数据,模板,挂载元素,方法,声明周期等。
new Vue({
// 挂载元素
el: '#app',
// 数据
data: {
message: 'Hello Vue!'
}
});
5:数据绑定
<body>
<div id="app">
<!-- Hello Vue! -->
{{ message }}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
//将vue保存下来,方便后面改变数据
const vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
6:声明周期
实例在创建阶段,挂载的事件监听,并实时更新
B:模板语法
1:插值
a:文本
数据绑定最常见的形式就是 (双大括号) 的文本插值:
通过使用 v-once 指令,插值后数据改变,不会更新
<p v-once>这个将不会改变: {{ msg }}</p>
b:原始HTML
{{}}会将数据解析为文本,而非html,要输出html要通过v-html
<div>{{htmlCode}}</div>
<div v-html="htmlCode"></div>
打印:
'<span style="color:red">this is a test</span>
this is a test
c:特性
如果要控制属性,可以让属性和data值进行绑定,通过v-bind指令
<div id="app">
<div v-bind:id="one" v-bind:class="two"></div>//缩写:class :id
</div>
<script>
const app = new Vue({
el: '#app',
data: {
one: 'bcd',
two: 'abc'
}
})
</script>
打印:
<div v-bind:id="bcd" v-bind:class="abc"></div>
d:使用 JavaScript 表达式
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式 。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
C:计算属性和侦听器
1:计算属性
属性
模板的初衷是用于简单运算的,在模板中放太多逻辑难以维护,所以任何复杂逻辑,都应当使用计算属性。
<div id="app">
<p> {{Mess}}</p>
</div>
<script>
const data = {
Mess: 'Hello Vue!'
}
const vm = new Vue({
el: '#app',
data: data,
computed: {
Mess: function () {
return this.message.split('').reverse().join('');
}
},
});
</script>
</body>
方法
<div id="app">
<p>{{ message }}</p>
<!-- Hello Vue! -->
<p>{{ reverseMess() }}</p>
<!-- !euV olleH -->
</div>
<script>
const data = {
message: 'Hello Vue!'
}
const vm = new Vue({
el: '#app',
data: data,
methods: {
reverseMess: function () {
return this.message.split('').reverse().join('')
}
}
});
</script>
属性和方法的区别
计算属性只有在它相关依赖发生改变时才会重新求值,方法只要发生重新渲染,method调用会执行所有函数。
a:计算属性的 setter
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ’ ’ + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(’ ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
2:数据观察
提供watch来观察和响应data数据的变动
<div id="app">
<p @click=a++>{{a}}</p>
</div>
const vm = new Vue({
el: '#app',
data: {
a: 1
},
watch: {
a: function(val, oldVal) {
this.message = '新' + oldVal + '旧' + val;
}
}
除watch以外$watch也可以监听数据的变动,会返回一个函数,用来停止触发回调
<div id="app">
<p @click=a++>{{a}}</p>
</div>
const vm = new Vue({
el: '#app',
data: {
a: 1
},
});
const w = vm.$watch('a', function (one, old) {
console.log("新值" + one);
console.log("旧值" + old);
if (one === 10) {
w();
}
})
D:Class 与 Style 绑定
绑定 HTML Class
对象语法
<!-- <p :class="example">Lorem ipsum dolor sit.</p> -->
const vm = new Vue({
el: '#app',
data: {
example: {
abc:true,
bcd:true,
def:false,
}
},
})
数组语法
<p :style="[test1,test2]">Lorem ipsum dolor sit amet.</p>
const vm = new Vue({
el: '#app',
data: {
test: {
color: "skyblue",
fontSize: "20px"
},
test1: {
color: "green",
},
test2: {
fontSize: "18px",
}
},
})
绑定内联样式
对象语法
<div v-bind:style="test">Lorem ipsum dolor sit amet.</div>
const vm = new Vue({
el: '#app',
data: {
test: {
color: "skyblue",
fontSize: "20px"
},
},
})
数组语法
<div v-bind:style="[style1, style2]">Lorem ipsum dolor.</di>
const vm = new Vue({
el: '#app',
data: {
style1: {
color: "skyblue",
fontSize: "20px"
},
style2: {
color: "green",
},
},
})
E:条件渲染
v-if指令
<h1 v-if="one">Vue is awesome!</h1>
<h1 v-else>Oh no </h1>
在 元素上使用 v-if 条件渲染分组
<template v-if="one">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else指令
<div v-else>
hello
</div>
v-else-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
用 key 管理元素
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。如果不要复用它们”。只需添加一个具有唯一值的 key 属性即可。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
F:列表渲染
1:使用v-for进行列表渲染
a:v-for指令要使用 stu in students形式的语法,students是数组,stu是迭代的别名:
<body>
<div id="app">
<p v-for=" stu in students">my name is {{ stu.name }}҅I'm {{ stu.age }} years old.</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
students: [
{ 'name': 'dffghg', 'age': 18,"gender":"男" },
{ 'name': 'fgrhj', 'age': 20,"gender":"男" },
{ 'name': 'rty', 'age': 2,"gender":"男" }
]
}
});
</script>
</body>
2:数组更新检测
a:变异方法
用了该方法会改变原数组
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
b:非变异方法
用了该方法不会改变原数组
concat
slice
map
filter
c:无法检测的数组
还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:
@1:利用索引直接设置一个
@2:修改数组长度时
如果要设置数组某一个具体的项目,可以使用vue实例的set方法,
而如果要改变数组的长度的话,使用splice来进行替代
G:事件处理
1:事件绑定
<body>
<div id="app">
<p @click="btn">Lorem ipsum dolor sit amet.</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
btn() {
window.alert('aaa');
}
}
})
</script>
</body>
a:为什么在html中监听事件?
是因为它不会有任何的维护困难,还有以下几个好处:
**·**看到html,并能轻松知道js里面对应的方法;
**·**更 易于测试;
**·**当在html里销毁时,所有的事件会自动删除;
2:修饰符
·事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
·按键修饰符
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
鼠标按键修饰符:
.left
.right
.middle
修饰键
.ctrl
.alt
.shift
.meta
组件上的事件绑定
如需给组件绑定事件,可以写在组件的template模板里面
<body>
<div id="app">
<parent></parent>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('parent', {
template: `
<div>
<p @click='test'>hello</p>
</div>
`,
methods: {
test() {
alert('click');
}
}
});
new Vue({
el: '#app'
});
</script>
</body>
H:表单
1:基础语法
a:文本
可以用v-model指令在表单空间元素上进行双向绑定,v-model本质上不过是语法糖,负责监听用户的输入事件以更新数据。
<body>
<div id="example">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#example',
data: {
message: ''
}
})
</script>
</body>
v-molel是:value和@input事件的语法糖,下面用:value和@input事件来改写v-model
<body>
<div id="example">
<input :value="message" placeholder="edit me" @input="message=$event.target.value">
<p>Message is: {{ message }}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#example',
data: {
message: ''
}
})
</script>
</body>
b:多行文本
<body>
<div id="example">
<div>
<span>Multiline message is:</span>
<p style="white-space: pre-line">{{ message }}</p>
</div>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#example',
data: {
message: ''
}
})
</script>
</body>
c:复选框
<body>
<div id="example">
<input type="checkbox" v-model="test">
<span>{{ test }}</span>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#example',
data: {
test: true//复选框选中是值为true,没有选中未false
}
})
</script>
</body>
d:单选按钮
<body>
<div id="example">
<div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">one</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">two</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">three</label>
</div>
<div>
<span>Checked names: {{ checkedNames }}</span>
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#example',
data: {
checkedNames: []
}
})
</script>
</body>
e:下拉列表
<body>
<div id="app">
<select name="" id="" v-model='city'>
<option disabled value="">请选择城市</option>
<option value="成都">成都</option>
<option value="重庆">重庆</option>
<option value="天津">天津</option>
<option value="上海">上海</option>
<option value="杭州">杭州</option>
</select>
<p>֦{{city}}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
city: '',
}
});
</script>
</body>
2:值绑定
a:复选框
b:单选按钮
c:选择列表
3:修饰符