VUE学习第一天
vue初始
vue介绍
- vue是构建用户界面的渐进式框架,采用自底向上逐层应用开发
- 核心理念:数据驱动视图,组件化开发
框架和库的区别
- 框架:一套完整的解决方案,对项目的侵入性较大。如果项目需要更换框架,则需要重构项目
- 库:提供某一个功能,对项目的侵入性较小。如果某个库无法实现需要的功能,可以简单换到其他库
MVC和MVVM的区别
- MVC是后端分层开发的概念
- V:view 视图层。作用:发送数据,展示数据
- C:controller 调度层。作用:响应数据,返回数据
- M:model 模型层。作用:处理数据,和数据库打交道
- MVVM是前端视图层的概念
- V:view 视图层。作用:展示数据
- VM:view-model 视图模型层。作用:连接视图层和模型层,承上启下
- M:model 模型层。作用:逻辑处理
vue的书写
- 1.引入vue.js文件
- 2.创建视图层(body中创建标签)
- 3.创建vue实例化对象 new Vue( { el,data,methods } )
vue对象中的el data methods名字不可变,单词拼写错误会报错
渲染数据常用命令
插值表达式
使用{{ }}引用变量,将data中的变量值渲染到页面上,可以做简单的计算
v-text
替换标签中原有的内容,不会解析富文本
v-html
替换标签中原有的内容,会解析富文本
<div id="app">
<!-- 插值表达式,使用{{}}引用变量,将data中的变量值渲染到页面上,可以做简单的计算 -->
<div>{{msg}}</div>
<!-- v-text,替换标签中原有的内容,不会解析富文本 -->
<div v-text="msgText"></div>
<!-- v-html,替换标签中原有的内容,会解析富文本 -->
<div v-html="msgHtml"></div>
</div>
let vm = new Vue({
el: '#app',//控制区域
data: {
msg: '插值表达式',
msgText: 'v-text',
msgHtml: 'v-html',
},//变量
methods: {
}
}//事件
})
元素绑定常用命令
v-bind
元素属性绑定
在元素标签内部 v-bind:‘属性名’=‘data变量名’,可以简写成**:属性名=‘data变量名’‘**
<!-- v-bind,给元素绑定属性,可以简写成: -->
<a :href="url">百度</a>
let vm = new Vue({
el: '#app',//控制区域
data: {
url: 'http://www.baidu.com'
},//变量
methods: { }//事件
})
v-on
元素事件绑定
在元素标签内部 v-on:‘事件类型’=‘事件函数名’,可以简写成**@事件类型=’事件函数名‘**
<!-- v-on,给元素绑定事件,可以简写成@ -->
<button @click="btn">点击弹框</button>
事件函数写在vue实例对象的methods里面
let vm = new Vue({
el: '#app',//控制区域
data: {
},//变量
methods: {
btn(){
alert('v-on绑定事件');
timer=setInterval(()=>{
console.log(this);//只有使用箭头函数,this才指向vue实例对象
},1000)
}
}//事件
})
命令修饰符
举例说明:给出三个颜色大小各不相同的盒子,样式代码如下,样式如图
<div id="app">
<div @click="big" class="big">
<div @click="middle" class="middle">
<div @click="small" class="small">
</div>
</div>
</div>
</div>
css样式
.big {
width:400px;
height:400px;
background-color: #b0ffff;
margin:10px auto;
}
.middle {
width: 300px;
height: 300px;
background-color: rgb(255, 141, 141);
margin: 10px auto;
}
.small {
width: 200px;
height: 200px;
background-color: rgb(167, 166, 255);
margin: 10px auto;
}
js代码
let vm = new Vue({
el:'#app',
data:{
},
methods:{
big(){
console.log('big');
},
middle() {
console.log('middle');
},
small() {
console.log('small');
},
baidu(){
console.log('跳转百度');
}
}
})
效果图
.stop
阻止事件冒泡,即事件由内向外触发
例如,点击最小的盒子时,打印结果会从小到大触发
在@事件类型后面加上.stop可以阻止事件冒泡
<!-- .stop 阻止事件冒泡 -->
<div @click="big" class="big">
<div @click="middle" class="middle">
<div @click.stop="small" class="small">
</div>
</div>
</div>
再点击最小的盒子时,由于阻止了冒泡,因此只打印small
.capture
添加事件捕获,在事件触发时会先触发事件捕获,再触发事件冒泡
<!-- .capture 添加事件捕获 -->
<div @click="big" class="big">
<div @click.capture="middle" class="middle">
<div @click="small" class="small">
</div>
</div>
</div>
给middle盒子添加.capture,触发small盒子会依次打印middle(捕获),small(触发),big(冒泡)
.once
只会触发一次事件
给small添加.once,第二次不再触发(但仍会触发事件冒泡)
第一次正常打印,
<!-- .once 事件只触发一次 -->
<div @click="big" class="big">
<div @click="middle" class="middle">
<div @click.once="small" class="small">
</div>
</div>
</div>
.self
只有事件在元素本身触发时才会执行回调函数
<!-- .self 事件在元素本身触发时才触发 -->
<div @click.self="big" class="big">
<div @click="middle" class="middle">
<div @click="small" class="small">
</div>
</div>
</div>
只有点击big盒子时才会触发打印big
.prevent
阻止默认事件,阻止表单提交、a连接标签跳转
<!-- .prevent 阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent="baidu">百度一下</a>
会触发事件打印“跳转百度”但页面不会跳转
数据双向绑定
v-model
一般只用于表单元素(input、select、textarea等)的value属性
v-model:value=‘data中的变量值’,“:value”可以省略
双向绑定的原理
通过数据劫持结合发布者-订阅者模式实现。通过Object.defineProperty()劫持各个属性中的setter和getter。当数据发生变化时,执行相应的函数从而进行视图更新。
一个简单的加法器,双向绑定用于获取用户在input框里输入的值
<div id="app">
<!-- v-model 双向绑定,用于绑定表单控件的value属性 value可以省略-->
<!-- v-bind只能单向绑定,用户在input框输入的值无法获取到 -->
<input type="text" v-model="value1">+<input type="text" v-model="value2">
<button @click="add">=</button>
<input type="text" v-model="value3">
</div>
let vm = new Vue({
el: '#app',
data: {
value1: '',
value2: '',
value3: ''
},
methods: {
add() {
this.value3 = Number(this.value1) + Number(this.value2)
}
}
})