阜新网络推广_广州防疫最新动态_哈尔滨最新疫情通报_临沂百度代理公司有几个

1. 英文官网: https://vuejs.org/
2. 中文官网: https://cn.vuejs.org/

Vue介绍

Vue是一套用于构建用户界面的渐进式框架。（动态构建用户界面的渐进式 JavaScript 框架）
Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue的特点

1. 遵循 MVVM 模式
2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

引入vue

在网址https://cn.vuejs.org/v2/guide/installation.html

点击开发版本下载
开发版本：包含完整的警告和调试模式，更加适合于开发者使用
生产版本：删除了警告，整体更加小，适用于项目完成后的部署上线使用
在HTML网页中使用script标签引用

初始Vue(Hello Vue!)

声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
插值语法：

<div id="root">
{{message}}
</div>
1
2
3

el:类似于选择器

new Vue({
el:'#root',
data:{message:'Hello Vue!'
}
})
1
2
3
4
5
6

指令语法：

数据绑定
单向数据绑定
1.语法：v-bind:href="xxx"或简写为 :href
v-bind给标签属性动态添加数据
2.特点：数据只能从data流向页面

<div id="root">
<a v-bind:href="url">点我去百度</a>
</div>

new Vue({
el:'#root',
data:{url:"www.baidu.com"
}
})
1
2
3
4
5
6

插值语法用于解析标签体内容
指令语法用于解析标签（包括：标签属性，标签体内容，绑定事件…）

<div id="#root">单向数据绑定:<input type='text' v-bind:value="name"/>
</div>
1
2
3

new Vue({el:'#root',data:{name:"傅工"}
})
1
2
3
4
5
6

双向数据绑定

v-model:实现表单输入和应用状态之间的双向绑定

<div id="root"><p>{{name}}</p>双向数据绑定:<input type='text' v-model:value="name"/>
</div>
1
2
3
4

new Vue({
el:'#root',
data:{name:'刘强'
}
})
1
2
3
4
5
6

注：v-model只能应用在表单类元素（输入类元素）上
Vue中有2种数据绑定方式：
1.单向数据绑定（v-bind）：数据只能从data流向页面。
2.双向数据绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model：value 可以简写为v-model，因为v-model默认收集的就是value值。

el与data的两种写法
el的两种写法

<div id="root"> <h1>你好！{{name}}</h1>
</div>
1
2
3

const v=new Vue({//el:'#root',//第一种写法data:{name:'刘强'}
})

//方式二：使用$mount来选择加载容器</span><spanclass="tokencomment">//v.$mount(‘#root’)
//等一秒钟关联
setTimeout(()=>{
v.$mount(‘#root’)
},1000)

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

data的两种写法

<div id="root"> <h1>你好！{{name}}</h1>
</div>
1
2
3

const v=new Vue({el:'#root',//data第一种写法：对象式//data:{//    name:'刘强'//}//data第二种写法：函数式data(){console.log('@@@',this)//此处的this是Vue实例对象return{name:'刘强'  }}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

data与el有两种写法
1.el有两种写法
（1）new Vue时配置el属性
（2）先创建Vue实例，随后再通过vm.$mount（‘#root’）指定el的值
2.data有两种写法
（1）对象式
（2）函数式
如何选择：目前哪种写法都可以，到后面学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则
由Vue管理的函数，一定不要箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

理解MVVM模型

M:模型（Model）:对应data中的数据
V:视图（View）:模板
vm:视图模型（ViewModel）：Vue实例对象

<div id="root"><h1>学校名称:{{name}}</h1><h1>学校地址:{{address}}</h1>
</div>
1
2
3
4

new Vue({
el:'#root'
data:{name:"幼专",address:"重庆"
}
})
1
2
3
4
5
6
7

MVVM模型
1.M：模型（Model）：data中的数据
2.V：视图（View）：模板代码
3.VM：视图模型（ViewModel）:Vue实例
观察发现：
1.data中所有的属性，最后都出现在了VM身上。
2.VM身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

事件处理

方式1：
v-on:添加一个事件监听器

<div id="root">
<h1>欢迎来到{{name}}学习</h1>
<button v-on:click='showInfo'>点击我提示信息</button>
</div>
1
2
3
4

new Vue({el:'#root',data:{name:'幼专'},methods:{showInfo(){alert("同学你好!")}}
})
1
2
3
4
5
6
7
8
9
10
11

方式二：
@click

<div id="root"><h1>{{content}}</h1><button @click="bot">下一句</button>
</div>
1
2
3
4

new Vue({el:'#root',data:{content:"好好学习，"},methods:{bot:function (){this.content="天天向上！"}}
})
1
2
3
4
5
6
7
8
9
10
11

传参数

<div id="root"><button @click="demo(60)">点击</button>
</div>
1
2
3

new Vue({el:'#root',data:{
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{<!-- --></span><span class="token function-variable function">demo</span><span class="token operator">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">number</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>

})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件。其中xxx是事件名。+
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数。this的指向是vm 或 组件实例对象；
5.@click=“demo” 和 @click=“demo($event)” 效果一样，但后者可以传参；

事件修饰符

<div id="root"><h3>欢迎来到{{name}}学习</h3><a href="http://www.baidu.com" @click="showInfo">点击我提示</a>
</div>
1
2
3
4

new Vue({el:'#root',data:{name:"幼专"},methods:{showInfo:function (){alert("欢迎同学！")}}
})
1
2
3
4
5
6
7
8
9
10
11

出现的问题：弹出了提示框，但是又跳转到了百度
要求：只弹出提示框，不进行百度跳转
prevent：阻止默认行为

<div id="root"><h3>欢迎来到{{name}}学习</h3><a href="http://www.baidu.com" @click.prevent="showInfo">点击我提示</a>
</div>
1
2
3
4

new Vue({el:'#root',data:{name:"上海"},methods:{showInfo:function (){alert("欢迎同学！")}}
})
1
2
3
4
5
6
7
8
9
10
11

Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素是才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

阻止事件冒泡（常用）；

<div id="root"><div class="demo1"  @click="showInfo"><button @click.stop="showInfo">点击我提示信息</button></div>
</div>
1
2
3
4
5

new Vue({el:'#root',data:{
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{<!-- --></span><span class="token function-variable function">showInfo</span><span class="token operator">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"欢迎同学！"</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>

})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

<style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}
</style>
1
2
3
4
5
6
7
8
9

事件只触发一次（常用）；

<div id="root"><button @click.once="showInfo">点击我提示信息</button>
</div>
1
2
3

new Vue({el:'#root',data:{
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{<!-- --></span><span class="token function-variable function">showInfo</span><span class="token operator">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"欢迎同学！"</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>

})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

stop与prevent连用

<div id="root"><div class="sty" @click="showInfo"><a :href="url" class="styl" @click.prevent.stop="showInfo">点击我</a></div>
<script>
1
2
3
4
5

new Vue({el:'#root',data:{url:"https://www.baidu.com/"},methods:{showInfo() {alert("你好！")}}
})
1
2
3
4
5
6
7
8
9
10
11

键盘事件

@keyup

<div id="root"><input @keyup.enter="showInfo"></input>
</div>
1
2
3

new Vue({el:'#root',data:{
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{<!-- --></span><span class="token function-variable function">showInfo</span><span class="token operator">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span><span class="token comment">// if(e.keyCode !==13) return</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>

})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

Vue中常用的按键别名：
回车=》enter
删除=》delete（捕获"删除"和"退格"键）
退出=》esc
空格=》space
换行=》tab
上=》up
下=》down
左=》left
右=》right

计算属性

computed

<div id="root">姓:<input v-model="firstname"><br><br>名:<input v-model="lastname"><br><br>
<!--    全名:<span>{{fullName}}</span><br><br>-->
<!--    全名:<span>{{fullName}}</span><br><br>-->
<!--    全名:<span>{{fullName}}</span><br><br>-->全名:<span>{{fullName}}</span>
</div>
1
2
3
4
5
6
7
8

const vm=new Vue({el:'#root',data:{firstname:"张",lastname:"三"},computed:{fullName:{//get有什么作用？当有读取fullName时，get就会被调用。且返回值就作为fullName的值//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。get(){console.log("get被调用了")// console.log(this) //此处的this是vmreturn this.firstname+'-'+this.lastname},//set什么时候调用？当fullName被修改时。set(value){console.log('set',value)const arr=value.split('-')this.firstname=arr[0]this.lastname=arr[1]}}}})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

计算属性：
1.定义：要用的属性不存在，要通过已有属性计算的来
2.原理：底层借助了object.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
（1）初次读取时会执行一次
（2）当依赖的数据发生改变时会被在次调用
4.优势：与methods实现相比，内部有缓存机制（复用）。效率更高，调用方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

计算属性_简写
注：只考虑读取，不考虑修改时使用

<div id="root">姓:<input v-model="firstname"><br><br>名:<input v-model="lastname"><br><br>全名:<span>{{fullName}}</span>
</div>
1
2
3
4
5

const vm=new Vue({el:'#root',data:{firstname:"张",lastname:"三"},computed:{//完整写法
// fullName:{
//     get(){
//         console.log("get被调用了")
//         return this.firstname+'-'+this.lastname
//     },
//     set(value){
//         console.log('set',value)
//         const arr=value.split('-')
//         this.firstname=arr[0]
//         this.lastname=arr[1]
//     }
// }
<span class="token comment">//简写：</span>

fullName(){
console.log(“get被调用了”)
return this.firstname+‘-’+this.lastname
}
}
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

监视属性

使用之前知识点的写法：

<div id="root"><h2>今天天气很{{info}}</h2><!--    绑定事件的时候@xxx="yyy"_yyy可以写一些简单的语句--><!--    <button @click="isHot=!isHot">切换天气</button>--><button @click="changeWeather">切换天气</button>
</div>
1
2
3
4
5
6

new Vue({el:'#root',data:{isHot:true},computed:{info(){return this.isHot?'炎热':'凉爽'}},methods:{changeWeather(){this.isHot=!this.isHot}}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用监视属性写法：
watch

<div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button>
</div>
1
2
3
4

const vm=new Vue({el:'#root',data:{isHot:true},computed:{info(){return this.isHot?'炎热':'凉爽'}},methods:{changeWeather(){this.isHot=!this.isHot}},//第一种方式// watch:{//     isHot:{//         immediate:true,//初始化时让handler调用一下//         //handler什么时候调用？当isHot发生改变时。//         handler(newValue,oldValue){//             console.log("isHot被修改了",newValue,oldValue)//         }//     }// }})
//通过VM第二种方式
vm.$watch('isHot',{immediate:true,//初始化时让handler调用一下//handler什么时候调用？当isHot发生改变时。handler(newValue,oldValue) {console.log("isHot被修改了", newValue, oldValue)}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

监视属性watch:
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视的两种写法：
（1）new Vue时传入watch的配置
（2）通过vm.$watch监视

条件渲染

条件v-if

<div id="root"><p v-if="seen">这是p标签</p>
</div
1
2
3

new Vue({
el:'#root',
data:{seen:true
}
})
1
2
3
4
5
6

v-if-else

<div id="root"><h2 v-if="seen">hello Vue!</h2><h2 v-else>暂无数据!</h2>
</div>
1
2
3
4

new Vue({el:'#root',data:{seen:false}

})

• 1
• 2
• 3
• 4
• 5
• 6
• 7

v-else-if

<div id="root"><div v-if="seen === '1'">A</div><div v-else-if="seen === '2'">B</div><div v-else-if="seen === '3'">C</div><div v-else>Not A/B/C</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

new Vue({el:'#root',data:{seen:"5"}

})

• 1
• 2
• 3
• 4
• 5
• 6
• 7

v-show

根据条件展示元素

<div id="root"><h1 v-show="seen">Hello!</h1>
</div>
1
2
3

new Vue({el:'#root',data:{seen:false}

})

• 1
• 2
• 3
• 4
• 5
• 6
• 7

列表渲染

<div id="root"><ol><li v-for="item in todos">{{item.text}}</li></ol>
</div>
1
2
3
4
5

new Vue({
el:'root',
data:{todos:[{text:"学习javascript"},{text:"学习Vue"},{text:"学好前端知识"}]
}
})
1
2
3
4
5
6
7
8
9
10

表单输入绑定

v-model用户输入双向绑定数据

复选框（checkbox）

<div id="root"><input type="checkbox" v-model="checken">复选按钮
</div>
1
2
3

new Vue({el:"#root",data(){return{checken:true}}
})
1
2
3
4
5
6
7
8

多个复选框

<div id="root"><input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mike</label><br><span>Checked names: {{ checkedNames }}</span>
</div>
1
2
3
4
5
6
7
8
9
10

new Vue({el:"#root",data(){return{checkedNames:[]}}
})
1
2
3
4
5
6
7
8

单选按钮

<div id="root"><input type="radio" id="one" value="0" v-model="picked"><label for="one">男</label><br><input type="radio" id="two" value="1" v-model="picked"><label for="two">女</label><br><span>性别: {{ picked }}</span>
</div>
1
2
3
4
5
6
7
8
9

new Vue({el:"#root",data(){return{picked:''}}
})
1
2
3
4
5
6
7
8

下拉选项

<div id="root"><select v-model="selected"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option></select><span>Selected: {{ selected }}</span>
</div>
1
2
3
4
5
6
7
8
9

new Vue({el:"#root",data(){return{selected:''}}
})
1
2
3
4
5
6
7
8

用 v-for 渲染的动态选项：

<div id="root"><select v-model="selected"><option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option></select><span>Selected: {{ selected }}</span>
</div>
1
2
3
4
5
6
7
8

new Vue({el:"#root",data(){return{selected: 'A',options: [{ text: 'One', value: 'A' },{ text: 'Two', value: 'B' },{ text: 'Three', value: 'C' }]}}
})
1
2
3
4
5
6
7
8
9
10
11
12
13

修饰符

.lazy:移除输入框时更新数据

<div id="root"><input v-model.lazy="msg">{{msg}}
</div>
1
2
3

new Vue({el:"#root",data(){return{msg:''}}
})
1
2
3
4
5
6
7
8

.number:把输入框中输入的字符串自动转换为数字

<div id="root"><input v-model.number="msg">{{msg}}
</div>
1
2
3

new Vue({el:"#root",data(){return{msg:''}}
})
1
2
3
4
5
6
7
8

.trim:去除输入框两边的空白

<div id="root"><input v-model.trim="msg">{{msg}}
</div>
1
2
3

new Vue({el:"#root",data(){return{msg:''}}
})
1
2
3
4
5
6
7
8

组件化应用构建

注：使用组件传输值，data必须是函数

data: function () {return {

}
}

• 1
• 2
• 3
• 4
• 5

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

<div id="root"><ol><!-- 创建一个 todo-item 组件的实例 --><todo-item></todo-item><todo-item></todo-item></ol>
</div>
1
2
3
4
5
6
7

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {template: '<li>这是个待办项</li>'
})

var app = new Vue({
el:‘#root’,
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

props:props是单向绑定的
当父组件的属性变化时，将传导给子组件，但是反过来不会。
每次父组件更新时，子组件的所有 prop 都会更新为最新值。
不要在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。
在两种情况下，我们很容易忍不住想去修改 prop 中数据：
1.Prop 作为初始值传入后，子组件想把它当作局部数据来用；
2.Prop 作为原始数据传入，由子组件处理成其它数据输出。
对这两种情况，正确的应对方式是：
定义一个局部变量，并用 prop 的值初始化它：

<div id="root"><ol><!-- 创建一个 todo-item 组件的实例 --><todo-item v-for="item in datalist" v-bind:todo="item" v-bind:key="item.id"></todo-item></ol>
</div>
1
2
3
4
5
6

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {template: '<li>{{todo.text}}</li>',props:['todo']
})

new Vue({
el:‘#root’,
data:{
datalist:[
{ id:0,text:‘蔬菜’},
{ id:1,text:‘牛奶’},
{ id:2,text:‘水果’}
]
}
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16