什么是Vue？
1、Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。2、Vue 只关注视图层， 采用自底向上增量开发的设计。
3、Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue可以用来做什么？
Vue可以做从简单到复杂的前端单页应用，随处可见的Web前端都可以用Vue来开发。为什么使用Vue？
1、轻量级2、js语法
3、入门及上手快
vue与Jquery比较?
1、jquery关注dom2、vue关注数据，不关注dom
Vue.js 安装
使用 <script> 标签引入。Vue的书写格式
-
<div id="vue_det">
-
<h1>{{details()}}
</h1>
<!--使用两个括号来展示数据-->
-
</div>
-
<script type="text/javascript">
-
var vm =
new Vue({
-
el:
'#vue_det',
//表明作用域
-
data: {
//存储数据
-
………
-
},
-
methods: {
//事件处理方法
-
details:
function() {
-
……
-
}
-
}
-
})
-
</script>
Vue的对象
1、el：Vue的作用域，即只有在这个作用域里面的dom受Vue控制2、data：vue页面的数据模型，该数据模型为一个javascript对象，且在运行过程中该对象的属性不允许增加，因此页面数据模型必须提前定义好
3、methods：事件处理方法对象
数据绑定
1、数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值2、使用 v-html 指令用于输出 html 代码
示例：
-
<div id="app">
-
<div v-html="message">
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
message:
'<h1>Vue</h1>'
-
}
-
})
-
</script>
示例
-
<div id="app">
-
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
url:
'http://www.baidu.com'
-
}
-
})
-
</script>
5、 v-on 指令，它用于监听 DOM 事件
过滤器（可以接受参数）
示例
-
<div id="app">
-
{{ message | capitalize }}
-
<div v-bind:id="rawId | formatId">
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
message:
'runoob'
-
},
-
filters: {
//过滤器都书写在这个关键字里面
-
capitalize:
function (value) {
//过滤器函数接受表达式的值作为第一个参数。
-
if (!value)
return
''
-
value = value.toString()
-
return value.charAt(
0).toUpperCase() + value.slice(
1)
-
}
-
}
-
})
-
</script>
条件语句
1、v-if2、v-else
3、v-else-if
4、v-show
注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
示例
-
<div id="app">
-
-
<h1 v-show="true">Hello!
</h1>
-
-
<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>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
type:
'C'
-
}
-
})
-
</script>
v-if 和 v-show的区别
（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；
（2）编译过程：
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
（3）编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
（4）性能消耗：
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗；
（5）使用场景：
v-if适合运营条件不大可能改变；
v-show适合频繁切换。
循环语句
循环使用 v-for 指令。示例
-
<div id="app">
-
<ol>
-
<li v-for="site in sites"> //固定写法 参数 in 数组/对象…
-
{{ site.name }}
-
</li>
-
</ol>
-
<ul>
-
<li v-for="(value, key) in sites">
-
{{ key }} : {{ value }}
-
</li>
-
</ul>
-
<ul>
-
<li v-for="(value, key, index) in sites">
-
{{ index }}. {{ key }} : {{ value }}
-
</li>
-
</ul>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
sites: [
-
{
name:
'Runoob' },
-
{
name:
'Google' },
-
{
name:
'Taobao' }
-
]
-
}
-
})
-
</script>
样式绑定
一、Class属性绑定
1、行内对象绑定
-
<style>
-
.active {
-
width:
100px;
-
height:
100px;
-
background: green;
-
}
-
</style>
-
-
<div id="app">
-
<div v-bind:class="{ active: isActive }">
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
isActive:
true
-
}
-
})
-
</script>
2、预定义对象绑定
-
<style>
-
.active {
-
width:
100px;
-
height:
100px;
-
background: green;
-
}
-
.text-danger {
-
background: red;
-
}
-
</style>
-
-
<div id="app">
-
<div v-bind:class="classObject">
</div> //直接绑定对象
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
classObject: {
-
active:
true,
-
'text-danger':
true
-
}
-
}
-
})
-
</script>
3、数组绑定
-
<style>
-
.active {
-
width: 100px;
-
height: 100px;
-
background: green;
-
}
-
.text-danger {
-
background: red;
-
}
-
-
<body>
-
<div id="app">
-
<div v-bind:class="[activeClass, errorClass]">
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
activeClass:
'active',
-
errorClass:
'text-danger'
-
}
-
})
-
</script>
二、style属性绑定
1、行内对象绑定
-
<div id="app">
-
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">123
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
activeColor:
'green',
-
fontSize:
30
-
}
-
})
-
</script>
2、预定义对象绑定
-
<div id="app">
-
<div v-bind:style="styleObject">123
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
styleObject: {
-
color:
'green',
-
fontSize:
'30px'
-
}
-
}
-
})
-
</script>
3、数组绑定
-
<div id="app">
-
<div v-bind:style="[baseStyles, overridingStyles]">123
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
baseStyles: {
-
color:
'green',
-
fontSize:
'30px'
-
},
-
overridingStyles: {
-
'font-weight':
'bold'
-
}
-
}
-
})
-
</script>
Vue初始化方法
Mounted在vue初始化完成后调用该方法,一般用于vue初始化完成后需要自动执行的代码。
示例
v-model 指令在表单控件元素上创建双向数据绑定
一、单选框和复选框
示例
-
<div id="app">
-
<p>单个复选框：
</p>
-
<input type="checkbox" id="checkbox" value="asd" v-model="checked">
-
<label for="checkbox">{{ checked }}
</label>
-
-
<p>多个复选框：
</p>
-
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
-
<label for="runoob">Runoob
</label>
-
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
-
<label for="google">Google
</label>
-
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
-
<label for="taobao">taobao
</label>
-
<br>
-
<span>选择的值为: {{ checkedNames }}
</span>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
checked :
123,
-
checkedNames: [
1]
-
}
-
})
-
</script>
1、checked的值根据勾选状态的不同而改变，但不是true就是false
2、checkedNames是一个数组，里面元素包含的是你选中的的复选框的所有的value
二、下拉菜单
示例
-
<div id="app">
-
<select v-model="selected" name="fruit">
-
<option value="">选择一个网站
</option>
-
<option value="www.runoob.com">Runoob
</option>
-
<option value="www.google.com">Google
</option>
-
</select>
-
-
<div id="output">
-
选择的网站是: {{selected}}
-
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
selected:
''
-
}
-
})
-
</script>
根据你选中的哪个option，然后你绑定的模板所对应的值就是你选中的那个option的value
Vue的组件
书写格式Vue.component('组件名',{props:['属性名'],template:'模板内容'})
1、组件的简单书写格式
-
<div id="app">
-
<runoob>
</runoob>
<!--自定义组件的是使用-->
-
</div>
-
-
<script>
-
Vue.component(
'runoob', {
//自定义组件
-
template:
'<h1>自定义组件!</h1>'
-
})
-
new Vue({
-
el:
'#app'
-
})
-
</script>
2、新建一个.js文件，将Vue的组件书写在这个文件中，使用<script> 标签引入
1）新建.js文件
-
Vue.component(
'my-clock',{
-
props:[
-
'format'
//自定义组件的属性，可以用来传递值
-
],
-
template:
'<h3>{{d|formatdate(format)}}</h3>',
//将值传递给过滤器使用
-
filters:{
-
formatdate:
function(d,frm){
-
var dt= d.getFullYear()+
'-'+(d.getMonth()+
1)+
'-'+d.getDate();
-
var tm=d.getHours()+
':'+d.getMinutes()+
':'+d.getSeconds();
-
if(frm==
'date'){
-
return dt;
-
}
else
if(frm==
'time'){
-
return tm
-
}
else{
-
return dt+
' '+tm
-
}
-
}
-
},
-
-
data:
function(){
//必须使用函数 将数据进行隔离，否则多个位置使用同一个组件数据会共享
-
return {
-
d:
new
Date() }
-
},
-
methods:{
-
updatetime:
function (){
-
this.d=
new
Date()
-
}
-
},
-
-
mounted:
function (){
-
setInterval(
this.updatetime,
1000);
-
}
-
});
-
<script src="js/vue_00.js">
</script>
-
<div id="qwee">
-
<my-clock format="data">
</my-clock>
-
</div>
-
<script>
-
new Vue({
-
el:
"#qwee"
-
})
-
</script>
什么是Vue？
1、Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。2、Vue 只关注视图层， 采用自底向上增量开发的设计。
3、Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue可以用来做什么？
Vue可以做从简单到复杂的前端单页应用，随处可见的Web前端都可以用Vue来开发。为什么使用Vue？
1、轻量级2、js语法
3、入门及上手快
vue与Jquery比较?
1、jquery关注dom2、vue关注数据，不关注dom
Vue.js 安装
使用 <script> 标签引入。Vue的书写格式
-
<div id="vue_det">
-
<h1>{{details()}}
</h1>
<!--使用两个括号来展示数据-->
-
</div>
-
<script type="text/javascript">
-
var vm =
new Vue({
-
el:
'#vue_det',
//表明作用域
-
data: {
//存储数据
-
………
-
},
-
methods: {
//事件处理方法
-
details:
function() {
-
……
-
}
-
}
-
})
-
</script>
Vue的对象
1、el：Vue的作用域，即只有在这个作用域里面的dom受Vue控制2、data：vue页面的数据模型，该数据模型为一个javascript对象，且在运行过程中该对象的属性不允许增加，因此页面数据模型必须提前定义好
3、methods：事件处理方法对象
数据绑定
1、数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值2、使用 v-html 指令用于输出 html 代码
示例：
-
<div id="app">
-
<div v-html="message">
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
message:
'<h1>Vue</h1>'
-
}
-
})
-
</script>
示例
-
<div id="app">
-
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
url:
'http://www.baidu.com'
-
}
-
})
-
</script>
5、 v-on 指令，它用于监听 DOM 事件
过滤器（可以接受参数）
示例
-
<div id="app">
-
{{ message | capitalize }}
-
<div v-bind:id="rawId | formatId">
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
message:
'runoob'
-
},
-
filters: {
//过滤器都书写在这个关键字里面
-
capitalize:
function (value) {
//过滤器函数接受表达式的值作为第一个参数。
-
if (!value)
return
''
-
value = value.toString()
-
return value.charAt(
0).toUpperCase() + value.slice(
1)
-
}
-
}
-
})
-
</script>
条件语句
1、v-if2、v-else
3、v-else-if
4、v-show
注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
示例
-
<div id="app">
-
-
<h1 v-show="true">Hello!
</h1>
-
-
<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>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
type:
'C'
-
}
-
})
-
</script>
v-if 和 v-show的区别
（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；
（2）编译过程：
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
（3）编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
（4）性能消耗：
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗；
（5）使用场景：
v-if适合运营条件不大可能改变；
v-show适合频繁切换。
循环语句
循环使用 v-for 指令。示例
-
<div id="app">
-
<ol>
-
<li v-for="site in sites"> //固定写法 参数 in 数组/对象…
-
{{ site.name }}
-
</li>
-
</ol>
-
<ul>
-
<li v-for="(value, key) in sites">
-
{{ key }} : {{ value }}
-
</li>
-
</ul>
-
<ul>
-
<li v-for="(value, key, index) in sites">
-
{{ index }}. {{ key }} : {{ value }}
-
</li>
-
</ul>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
sites: [
-
{
name:
'Runoob' },
-
{
name:
'Google' },
-
{
name:
'Taobao' }
-
]
-
}
-
})
-
</script>
样式绑定
一、Class属性绑定
1、行内对象绑定
-
<style>
-
.active {
-
width:
100px;
-
height:
100px;
-
background: green;
-
}
-
</style>
-
-
<div id="app">
-
<div v-bind:class="{ active: isActive }">
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
isActive:
true
-
}
-
})
-
</script>
2、预定义对象绑定
-
<style>
-
.active {
-
width:
100px;
-
height:
100px;
-
background: green;
-
}
-
.text-danger {
-
background: red;
-
}
-
</style>
-
-
<div id="app">
-
<div v-bind:class="classObject">
</div> //直接绑定对象
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
classObject: {
-
active:
true,
-
'text-danger':
true
-
}
-
}
-
})
-
</script>
3、数组绑定
-
<style>
-
.active {
-
width: 100px;
-
height: 100px;
-
background: green;
-
}
-
.text-danger {
-
background: red;
-
}
-
-
<body>
-
<div id="app">
-
<div v-bind:class="[activeClass, errorClass]">
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
activeClass:
'active',
-
errorClass:
'text-danger'
-
}
-
})
-
</script>
二、style属性绑定
1、行内对象绑定
-
<div id="app">
-
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">123
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
activeColor:
'green',
-
fontSize:
30
-
}
-
})
-
</script>
2、预定义对象绑定
-
<div id="app">
-
<div v-bind:style="styleObject">123
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
styleObject: {
-
color:
'green',
-
fontSize:
'30px'
-
}
-
}
-
})
-
</script>
3、数组绑定
-
<div id="app">
-
<div v-bind:style="[baseStyles, overridingStyles]">123
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
baseStyles: {
-
color:
'green',
-
fontSize:
'30px'
-
},
-
overridingStyles: {
-
'font-weight':
'bold'
-
}
-
}
-
})
-
</script>
Vue初始化方法
Mounted在vue初始化完成后调用该方法,一般用于vue初始化完成后需要自动执行的代码。
示例
v-model 指令在表单控件元素上创建双向数据绑定
一、单选框和复选框
示例
-
<div id="app">
-
<p>单个复选框：
</p>
-
<input type="checkbox" id="checkbox" value="asd" v-model="checked">
-
<label for="checkbox">{{ checked }}
</label>
-
-
<p>多个复选框：
</p>
-
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
-
<label for="runoob">Runoob
</label>
-
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
-
<label for="google">Google
</label>
-
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
-
<label for="taobao">taobao
</label>
-
<br>
-
<span>选择的值为: {{ checkedNames }}
</span>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
checked :
123,
-
checkedNames: [
1]
-
}
-
})
-
</script>
1、checked的值根据勾选状态的不同而改变，但不是true就是false
2、checkedNames是一个数组，里面元素包含的是你选中的的复选框的所有的value
二、下拉菜单
示例
-
<div id="app">
-
<select v-model="selected" name="fruit">
-
<option value="">选择一个网站
</option>
-
<option value="www.runoob.com">Runoob
</option>
-
<option value="www.google.com">Google
</option>
-
</select>
-
-
<div id="output">
-
选择的网站是: {{selected}}
-
</div>
-
</div>
-
-
<script>
-
new Vue({
-
el:
'#app',
-
data: {
-
selected:
''
-
}
-
})
-
</script>
根据你选中的哪个option，然后你绑定的模板所对应的值就是你选中的那个option的value
Vue的组件
书写格式Vue.component('组件名',{props:['属性名'],template:'模板内容'})
1、组件的简单书写格式
-
<div id="app">
-
<runoob>
</runoob>
<!--自定义组件的是使用-->
-
</div>
-
-
<script>
-
Vue.component(
'runoob', {
//自定义组件
-
template:
'<h1>自定义组件!</h1>'
-
})
-
new Vue({
-
el:
'#app'
-
})
-
</script>
2、新建一个.js文件，将Vue的组件书写在这个文件中，使用<script> 标签引入
1）新建.js文件
-
Vue.component(
'my-clock',{
-
props:[
-
'format'
//自定义组件的属性，可以用来传递值
-
],
-
template:
'<h3>{{d|formatdate(format)}}</h3>',
//将值传递给过滤器使用
-
filters:{
-
formatdate:
function(d,frm){
-
var dt= d.getFullYear()+
'-'+(d.getMonth()+
1)+
'-'+d.getDate();
-
var tm=d.getHours()+
':'+d.getMinutes()+
':'+d.getSeconds();
-
if(frm==
'date'){
-
return dt;
-
}
else
if(frm==
'time'){
-
return tm
-
}
else{
-
return dt+
' '+tm
-
}
-
}
-
},
-
-
data:
function(){
//必须使用函数 将数据进行隔离，否则多个位置使用同一个组件数据会共享
-
return {
-
d:
new
Date() }
-
},
-
methods:{
-
updatetime:
function (){
-
this.d=
new
Date()
-
}
-
},
-
-
mounted:
function (){
-
setInterval(
this.updatetime,
1000);
-
}
-
});
-
<script src="js/vue_00.js">
</script>
-
<div id="qwee">
-
<my-clock format="data">
</my-clock>
-
</div>
-
<script>
-
new Vue({
-
el:
"#qwee"
-
})
-
</script>