Vue介绍
Posted q455674496
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue介绍相关的知识,希望对你有一定的参考价值。
1.Vue的简介
-
Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架。
- Vue 只关注视图层, 采用自底向上增量开发的设计。
-
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
官方文档:http://vuejs.org/v2/guide/syntax.html
中文文档:https://cn.vuejs.org/v2/guide/syntax.html
2.指令系统介绍
1.下载, 库引入
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- 模板语法插值{{ }} --> <h3>{{ msg }}</h3> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script> let vm = new Vue({ el:‘#app‘, // 绑定根元素 data:{ msg:‘2019-04-09‘, // 声明数据属性 } }) </script> </body> </html>
结果:
2.模板语法介绍
{{ 变量 }} {{ 1 + 1 }} {{ ‘hello‘ }} {{ 函数的调用 }} {{ 1<2 ? ‘真‘:‘假‘}}
3.v-text&v-html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- 模板语法插值{{ }} --> <h3>{{ msg }}</h3> <!-- v-text 只渲染文本 --> <div v-text="myTitle1"></div> <!-- v-html 不仅能渲染文本, 还可以渲染标签 --> <div v-html="myTitle2"></div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script> let vm = new Vue({ el:‘#app‘, // 绑定根元素 data:{ msg:‘2019-04-09‘, // 声明数据属性 myTitle1:‘<span>2019</span>‘, myTitle2:‘<span>2019</span>‘, }, }) </script> </body> </html>
4.v-if&v-show
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box{ width: 200px; height: 200px; background-color: red;margin-bottom: 20px; } </style> </head> <body> <div id="app"> <div class="box" v-if="isShow"></div> <div class="box" v-show="isShow"></div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script> let vm = new Vue({ el:‘#app‘, data:{ isShow:true, } }) </script> </body> </html>
效果图
将isShow改为false
总结:
v-if是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-show:不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
如果需要非常频繁地切换,用v-show,
如果在运行时条件很少改变的情况下,用v-if
5.v-for
v-for遍历数组元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <ul> <li v-for="item in items"> {{ item.name }}----{{ item.age }} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script> let vm = new Vue({ el:‘#app‘, data:{ items:[ {name:‘Jerry‘, age:20}, {name:‘Tom‘, age:20}, ] } }) </script> </body> </html>
结果:
v-for 还支持一个可选的第二个参数为当前项的索引
v-for="(item, index) in items"
6.v-bind
v-bind 主要用来绑定标签上的属性
传给v-bind:class一个对象动态地切换clas
<div id="app">
<div v-bind:class="{ active: isActive }"></div>
</div>
let vm = new Vue({
el:‘#app‘,
data:{
isActive:true,
}
})
结果:
7.v-on 事件绑定
<div id="app"> <button v-on:click=‘count+=1‘>加1</button> <h2>{{ count }}</h2> </div>
let vm = new Vue({
el:‘#app‘,
data:{
count:0,
}
})
on—click接收一个需要调用的方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 20px; height: 20px; background-color: red; } </style> </head> <body> <div id="app"> <!-- 调用一个方法 --> <button v-on:click=‘handlerClick‘>隐藏</button> <div class="box" v-show="isHidden"> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script> let vm = new Vue({ el:‘#app‘, data:{ isHidden : true, }, methods:{ // 方法 handlerClick(){ this.isHidden = false; } } }) </script> </body> </html>
效果:
8.表单输入绑定v-model,双向的数据绑定
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> </head> <body> <form action="" id="form"> <!--<input type="text" :value="text" @input="inputHandler">--> <!--<p>{{ text }}</p>--> <input type="text" v-model="text"> <a href="#">{{ text }}</a> </form> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script> let vm = new Vue({ el:‘#form‘, data:{ text:‘刘‘ }, methods:{ inputHandler(e){ console.log(e.target.value); this.text = e.target.value; } } }); </script> </body> </html>
效果:
以上是关于Vue介绍的主要内容,如果未能解决你的问题,请参考以下文章