您的位置：首页 > Web前端 > Vue.js

Vue基础知识2

2019-05-29 17:57 274 查看

1.条件渲染

条件指令可以控制元素的创建(显示)或者销毁(隐藏)

<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- false 表示隐藏（删除 -- 销毁 标签隐藏） -->
<div v-if="bool1">v-if</div>
<div v-else>else</div>
<!-- 多重渲染的写法 -->
<div v-if="type == 'A'">A</div>
<div v-else-if="type == 'B'">B</div>
<div v-else>daqiu</div>
<!-- v-show="bool":true显示  false隐藏display：none -->
<div v-show="bool1">v-show</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
bool1: true,
bool2: false,
type: 'A'
}
})
</script>
</body>

2.列表渲染

v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象

<div id="app">
<!--  v-for="临时变量  in 列表" -->
<ul>
<li v-for="i in list1">{{ i }}</li>
</ul>
<ul>
<!-- <li v-for="(i,j) in list"></li> -->
<!-- i:数据；j：下标 -->
<li v-for="(i, j) in list1">{{j+1}}、{{i}}</li>
</ul>
<ul>
<!-- js对象 -->
<!-- i 表示的是value -->
<li v-for="i in dict1">{{ i }}</li>
</ul>
<ul>
<!-- i:表示value，j：key值 -->
<li v-for="(value, key) in dict1">{{j}}:{{i}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
// 数组
list1: ['一', '二', '三'],
// 字典对象
dict1:{'name':'张三','age':30}
}
})
</script>

3.表单数据绑定

v-model 指令用于设置表单控件value属性值
数据双向绑定：当数据发生变化的时候,视图也就发生变化,当视图发生变化时,数据也会跟着同步变化

<div id="app">
<!-- v-model的值用于设置表单控件value属性值-->
<input type="text" v-model="txt1">
<div>{{txt1}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
txt1: '默认值',
}
})
</script>

4.vue.js的生命周期

每个Vue实例在被创建到销毁要经过一系列的过程，这整个过程称为Vue实例的生命周期
Vue在生命周期不同的阶段点会自动运行一些函数，这些函数称为Vue生命周期的钩子(hook)函数

生命周期钩子函数:

beforeCreate:在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

created : 在实例创建完成后被立即调用

beforeMount :在挂载开始之前被调用：相关的 render 函数首次被调用

mounted（最常用）: 实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用

beforeUpdate: 数据发生变化前调用
updated 数据发生变化后调用

destroyed :Vue实例销毁后调用

5.axios()与服务器数据交互

axios参数

// 引入函数库
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
var vm=new Vue({
el:'',
data:{},
mounted:function(){
//mounted 生命周期方法
axios({
//请求方式
method: 'get',
//请求路径
url: '/user/12345',
//请求参数
data: {
name: 'xxx',
pwd: 'yyy',
}
})
//访问成功回调的方法
.then(function(dat){
console.log(dat)
})
//访问失败回调的方法
.catch(function(e){
}),
},
})

</script>

6.扩展

6.1计算属性

复杂逻辑的表达式，使用计算属性

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
// 计算属性
computed: {
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
//侦听属性
watch:{
iNum:function(newval,oldval){
console.log(newval + ' | ' + oldval)
}
},
})
</script>

6.2侦听属性

侦听属性的作用是侦听某属性值的变化，从而做相应的操作，侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数,当你侦听的元素发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。

6.3过滤器

<div id="app">{{20 | RMB}}</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
filters:{
RMB:function(value){
if(value=='') {return;}
return '¥ '+value;
}
},
})
</script>

6.4 ES6新语法

6.5 Vue组件开发

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航