我们学习一门知识,肯定是从这个知识是什么开始,由来,发展历程,以及该知识的基本语法来学习.
今天和大家介绍一下前端流行的框架vue!!!
Vue最早发布于2014年左右，作者是尤雨溪。Vue 的定位就是为前端开发提供一个低门槛，高效率，但同时又能够伴随用户成长的框架
总结来说:vue是一套用于构建用户界面渐进式的javascript框架.
渐进式的意思呢?就是随学随用.
那么vue该如何使用呢?
步骤如下:
// 4.在页面中添加dom元素,与vue控制的区域相匹配
<div id="app">
// 在vue中使用插值语法来渲染到页面中
<p>姓名:{{username}}</p>
<p>年龄:{{age}}</p>
</div>
// 1.引入vue.js文件,该文件有vue这个构造函数
<script src="vue.js"></script>
// 2.实例化vue对象
<script>
let vm = new Vue({
// 3.在配置选项中使用el选项,选择vue控制的区域
el:"#app",
data:{
username:"苏苏",
age:18
}
})
</script>那么与vue想配套的指令有哪些呢?
在学习指令之前,我们了解一下{{}}这个插值表达式
插值表达式里面可以是数值,字符串,数组,对象,布尔以及方法或三元表达式
<div id="app">
<!-- 我是vue控制的区域 -->
我是num数据:{{num}}
</div>
<script src="./lib/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
num:1
}
})
</script>
指令是vue为开发者提供的一套特殊语法
运用vue指令可以减少我们对于dom的操作
vue指令按功能分可以分为6大类
内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
列表渲染指令
条件渲染指令
- 内容渲染指令(v-html和{{}}插值表达式)
内容渲染指令可以帮助开发者去渲染页面中的文本内容
我们如果想要渲染html标签到页面中,就需要用v-html来实现
<div id="app">
<!-- 我是vue控制的区域 -->
我是num数据:{{num}}
<p v-html="str"></p>
</div>
<script src="./lib/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
num:1,
str:"<h3>我是v-html渲染出来的内容</h3>"
}
})
</script>2.属性渲染指令
如果我们想给一个元素动态绑定一个属性,我们就可以使用v-bind来实现
<div id="app">
<input type="text" v-bind:placeholder='str'>
<!-- 简写形式 -->
<input type="tpassword" :placeholder="pwd">
</div>
<script src="./lib/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
str:'请输入账号'
}
})
</script>3.事件渲染指令
我们给一个元素添加事件可以使用v-on指令 我们点击一个按钮,让num++ v-on:事件类型="事件执行函数" 我们也可以采用简写形式 @click='事件执行函数' 事件执行函数要写在vue实例的methods选项中
<div id="app">
num为:{{num}}
<button type="button" v-on:click="btn">+1操作</button>
</div>
<script src="./lib/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
num:0,
},
methods:{
btn(){
this.num++
}
}
})
</script>
事件修饰符
.prevent和.stop
.prevent是阻止默认行为的
.stop是阻止冒泡的
当我们点击a链接跳转时我们可以添加@click.prevent="事件执行函数"
当我们嵌套元素都使用了相同的事件,那么点击子事件会冒泡影响到父事件,为了解决这个问题我们可以添加@click.stop="事件执行啊函数"
4.双向绑定
vue双向绑定的特点其实就是,数据的改变会驱动视图的变化,视图的变化就影响到数据的变化
在vue中我们可以用v-model来双向绑定的
v-model只能绑定到表单元素身上
双向绑定的修饰符
.number和.trim还有.lazy
.number自动将用户输入的值变为数值类型
.trim是自动清除用户输入的首位空格
.lazy是让 v-model 绑定的值，在“change”时更新，而非 “input”时更新
<div id="app">
<input type="text" v-model="username">
</div>
<script src="./lib/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
username:''
}
})
</script>5.条件渲染指令
条件渲染指令v-if和v-show
他们是用来做显示和隐藏功能的
v-if是删除dom节点,用于小量的切换
v-show是添加display为none来实现显示和隐藏的,用于大量的切换
v-if有配套v-else和v-else-if等
<div id="app">
<button @click="qiehuan">点击</button>
<p v-if="flag">这是v-if</p>
<p v-show="flag"></p>
<input type="checkbox" v-model="flag">
</div>
<script src="./lib/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
flag:false
},
methods:{
qiehuan(){
this.flag=!this.flag
}
}
})6.列表渲染指令
vue 提供了 v-for 列表渲染指令，用来辅助我们循环渲染一个列表结构。
注意：想要循环渲染哪个元素，v-for 就加在哪个元素身上。
官方推荐在使用 v-for 指令的时候，要添加一个 key 属性。
key 的作用：用来给循环的元素添加一个唯一的标识，来防止可能会出现的列表无法被正确渲染的问题。
<div id="app">
<p v-for="item in data" :key='item.id'>{{item.name}}</p>
</div>
<script src="./lib/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
data:[
{name:'susu',id:0},
{name:'lvlv',id:1}
]
},
})
