Vue基础知识
2019-04-26 本文已影响0人
Grayly吖
Vue基础知识
常用Java Script框架
- jQuery
- Backbone
- Angular
- vue
- React
- lodash & underscore
- Moment
1、Hello Vue
- (1)引入vue框架到body底部(创建全局对象)
- (2)作用域内写布局(相当于模板)
- (3)创建Vue实例,参数为对象
- (4)获取Vue实例挂载的元素节点
- (5)data是个对象,指定了控制的区域内要用的数据
- (6)methods内放方法,访问vm中数据必须要带this
- (7)在created(实例创建完成)中调用
// 创建vue的一个实例对象,参数为一个对象
const vm = new Vue({
el: '#app',
// 数据
data: {
msg: 'hello Vue',
msg2: '<button>我是按钮</button>'
}
});
2、常用指令
-
(1)花括号:{ { } }
- 括号内放变量或者调用方法
<div> {{msg}}</div>
- (2)v-text(与es5中的innerText等同)
<div v-text="msg"></div>
- (3)v-html(与es5中的innerHTML等同)
<div v-html="msg2"></div>
-
(4)列表渲染:v-for
- 对数组
<li v-for="(item,index) in students">
<span>编号: {{index}}</span>
<span>身份证: {{item.cardNo}}</span>
<span>姓名: {{item.name}}</span>
<span>年龄: {{item.age}}</span>
</li>
- 对 对象
<div id="app">
<ul>
<li v-for='(value,key) in city'>
<span>{{key}}</span> //属性名
<span>{{value}}</span> //属性值
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
//实例化vue对象,参数为对象
new Vue({
el: '#app',
data: {
city: {
"cityId": 110100,
"name": "北京",
"pinyin": "beijing",
"isHot": 1
}
}
})
</script>
-
(5)条件渲染: v-if 、 v-else:是否有这个标签 & v-show:是否显示(需要切换显示隐藏时使用)
- 可以单独用一个v-if
- 可以v-if 与 v-else同时使用,切使用时,两个 标签必须写在一起
<div v-if="isLogin">
用户: {{username}}
</div>
<div v-else>
<button>立即登陆</button>
</div>
- v- show
<div v-if="show"> //false时直接消失
若干内容.............
</div>
<div v-show="show"> //false时display隐藏
若干内容.............
</div>
-
(6)绑定事件和方法(写在methods)
- (6.1)@click=“toggle” :括号的有无取决于是否传参
- (6.2)v-on:click="toggle"
<div id="app">
<!-- <button v-on:click="toggle">隐藏</button> -->
<button @click="toggle">{{text}}</button>
<hr>
<div v-show="show">
内容...........
内容...........
内容...........
</div>
</div>
-
(7)绑定属性(例如a标签、图片的路径’)
- (7.1)v-bind
<a v-bind:href="url">百度</a>
<img v-bind:src="imgUrl" alt="">
- (7.2)省略v-bind,直接用冒号加属性
<img :src="imgUrl" alt="">
-
(8)绑定class和样式
- class也是属性,一样使用v-bind或冒号
//active为class名,isActive为属性值
<!-- 当isActive为true的时候,给button添加active类,否则不添加 -->
<button :class="{active:isActive}">按钮</button>
- 内联样式
<div :style="{ color: activeColor, fontSize: fontSize + 'px'}"></div>
- (9)双向数据绑定:v-model
<div id="app">
<input type="text" v-model="username">
</div>
<script src="./vue.js"></script>
<script>
// 生命周期
let vm = new Vue({
el:'#app',
data: {
username: 'liben'
}
})
- (10)Vue生命周期