## 前端三大框架
vue
react
angular
## 学源码：更好的使用vue
## vue：渐进式
1 js框架 框架 vs库
vue-core + components + vue-router + vuex[复杂项目] + vue-cli
2 mvvm框架
mvc:model view controller
view---viewmodel---model
## vue基本使用
【1】基本使用
<!-- view -->
<div id="app">
{{msg}}{{2+9}}
</div>
<!-- 模块化思想 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// vm相当于viewmodel
let vm = new Vue({
el: '#app', //底层使用document.querySelect('#app')
// model
data() {
return {
msg: 'hello Vue'
}
}
}); // vm
vm.msg = 'progressive javascript framework'; //数据驱动视图 数据改变 视图自动更新
</script>
【2】双向单向绑定
v-html:把数据填充到标签 支持标签[即：支持script JS语法使用] 谨慎使用
v-text:把数据填充到标签
v-pre:显示原内容
v-once:给标签只绑定数据一次，后面数据更新，标签内容不会发生变化
v-model 双向数据绑定，试图改变影响数据 数据改变影响视图
v-bind 单向绑定数据
<div id="app">
<div v-html>{{msg}}</div>
<div v-pre>{{msg}}</div>
<div>{{msg}}</div>
<p v-once>{{msg}}</p>
<div>
<input type="text" v-model="uname">
<!-- 语法糖 v-bind:属性 简写：属性 -->
<input type="text" v-bind:value="uname" name="" id="">
</div>
</div>
<!-- 模块化思想 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// vm相当于viewmodel
let vm = new Vue({
el: '#app', //底层使用document.querySelect('#app')
// model
data() {
return {
msg: 'hello Vue',
msg1: '<h1>Vue</h1>',
uname: 'macro'
}
}
}); // vm
vm.msg = 'progressive javascript framework';
【3】绑定单击事件
<div id="app">
<button v-on:click="num++">点我加1</button>
<!-- 假如实践直接绑定函数名 默认会传事件对象作为第一个实参 -->
<button v-on:click="increase1">点我加1</button>
<!-- 语法糖 @事件名称 是v-on：事件名称的简写 -->
<button @click="increase1(1,2,$event)">点我加1</button>
<p>{{num}}</p>
</div>
===============================================
// vm相当于viewmodel
let vm = new Vue({
el: '#app', //底层使用document.querySelect('#app')
// model
data() {
return {
num: 1
}
},
// 定义方法的节点
methods: {
increase() {
this.num++;
},
increase1(a, b, event) {
console.log(a, b);
console.log(event);
this.num++;
}
}
});
【3】阻止事件冒泡和默认行为
<div id="app">
<p @click="increase">
<!-- .stop:阻止冒泡 -->
<button @click.stop="num++">点我加1</button>
<button @click="num++">点我加2</button>
</p>
<!-- 两种阻止方式 .prevent:阻止默认行为 -->
<a href="http://www.qq.com" @click.prevent="handleClick">腾讯</a>
<p>{{num}}</p>
</div>
==============================================
// vm相当于viewmodel
let vm = new Vue({
el: '#app', //底层使用document.querySelect('#app')
// model
data() {
return {
num: 1
}
},
// 定义方法的节点
methods: {
increase() {
this.num++;
},
handleClick(event) {
console.log(111);
// event.preventDefault();
}
}
}); // vm
【4】键盘按起事件
<dic id="app">
<input type="text" v-model="uname" @keyup.delete="clearText" />
<input type="text" v-model="pwd" @keyup.abc="clearPwd" />
</dic>
=============================================
Vue.config.keyCodes.abc = 65; // 对应a~65
// vm相当于viewmodel
let vm = new Vue({
el: '#app', //底层使用document.querySelect('#app')
// model
data() {
return {
uname: '',
pwd: ''
}
},
// 定义方法的节点
methods: {
clearText() {
this.uname = '';
},
clearPwd() {
this.pwd = '';
}
}
}); // vm