Vue2

其他 2018-07-26 02:09:52 阅读次数: 0
Vue
1.列表渲染
通过 v-for 指令可以将一组数据渲染到页面中，数据可以是数组或者对象，v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
例如，  <li v-for="item in items">
    {{ item}}
遍历数组：
<li v-for="(item, index) in items"># index表示索引值
遍历对象：

<div v-for="(value, key, index) in object"> # 值 、键、索引值

<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< script src= "./vue.min.js" > < / script >
< script >
window. onload = function () {
var vm = new Vue({
el: '#app',
data:{
msg: 'hello world',
array:[ '海贼王', '火影', '妖精的尾巴'],
obj:{
name: 'zhangsan',
age: 20
}
}
})
}
< / script >
</ head >
< body >
< div id= "app" >
<!-- 数组的遍历 -->
< div >
< div v-for= "i in array" >
{{i}}
</ div >
</ div >

< div >
< div v-for= "(item,index) in array" >
{{item}} --- {{index}}
</ div >
</ div >

<!-- 对象的遍历 -->
<!-- obj:{
name:'zhangsan',
age:20
} -->
< ul >
< li v-for= "value in obj" >
{{value}}
</ li >
</ ul >

< ul >
< li v-for= "(value,key) in obj" >
{{value}} --- {{key}}
</ li >
</ ul >

< ul >
< li v-for= "(value,key,index) in obj" >
{{value}} --- {{key}}----{{index}}
</ li >
</ ul >
</ div >
</ body >
</ html >

2.事件处理
实际开发中，事件绑定有时候牵涉到阻止事件冒泡以及阻止默认行为
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->

<form v-on:submit.prevent></form>

<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< script src= "./vue.min.js" > < / script >
< script >
window. onload = function (){
var vm = new Vue({
el: '#app',
data:{

},
methods: {
func1 : function(){
alert( 'func1')
},
func2 : function(){
alert( 'func2')
}
}
})
}
< / script >
< style >
.box {
width: 300px;
height: 300px;
background-color: pink;
}
.subbox {
width: 100px;
height: 100px;
background-color: blue;
}
< / style >
</ head >
< body >
< div id= "app" >
< div class= "box" @ click= "func1" >
< div class= "subbox" @ click. prevent. stop= "func2" ></ div >
< div class= "subbox" @ click. prevent. stop ></ div >
</ div >
</ div >
</ body >
</ html >

3.表单输入绑定
可以用 v-model 指令在表单<input> 及 <textarea>、<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
单行文本框
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本框
<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
复选框：单个复选框，绑定到布尔值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多个复选框，绑定到同一个数组
<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>


data:{ checkedNames : [] } 为数组
单选框  radio
<input type="radio" v-model="str" value="0">
<input type="radio" v-model="str" value="1">  // data:{ str:"" } ,str的值和value的值一致
下拉框 select option
<div id="app">
        <select v-model="str" id="">
            <option disabled value="3">请选择</option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">深圳</option>
        </select>
        {{ str }}

    </div>  // data:{ str:"3"} ，str的值和value的值一致

<!-- 表单 -->
<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< script src= "./vue.min.js" > < / script >
</ head >

< body >
< div id= "app" >
< input type= "text" v-model= "msg" > {{msg}}
< button @ click= "change" >按钮 </ button >
< textarea v-model= "title" name= "" id= "" cols= "30" rows= "10" >
</ textarea >
{{title}}
</ div >
< script >
var vm = new Vue({
el: '#app',
data: {
msg: '',
title: 'hello world'
},
methods: {
change : function () {
this. msg += 'hello'
}
}
})
< / script >
</ body >

</ html >

<!-- 单选框 -->
<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< script src= "./vue.min.js" > < / script >
</ head >

< body >
< div id= "app" >
< input type= "radio" value= "0" name= "msg" >
< input type= "radio" value= "1" name= "msg" >
< input type= "radio" v-model= "msg" value= "0" >
< input type= "radio" v-model= "msg" value= "1" > {{msg}}
< select v-model= "message" id= "" >
< option disabled value= "" >请选择 </ option >
< option value= "0" >北京 </ option >
< option value= "1" >天津 </ option >
< option value= "2" >河北 </ option >
</ select >
{{message}}
< input disabled type= "text" >
</ div >
< script >
var vm = new Vue({
el: '#app',
data: {
msg: '',
message: ''
}
})
< / script >
</ body >

</ html >


<!-- 复选框 -->
<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< script src= "./vue.min.js" > < / script >
</ head >
< body >
< div id= "app" >
< input type= "checkbox" value= "0" v-model= "msg" >
< input type= "checkbox" value= "1" v-model= "msg" >
< input type= "checkbox" value= "2" v-model= "msg" >

{{msg}}
</ div >
< script >
var vm = new Vue({
el: '#app',
data:{
msg:[]
}
})
< / script >
</ body >
</ html >
4.生命周期方法
beforeCreate  
created
beforeMount  
mounted  // 浏览器上的内容，加载完，然后一直等待这里
beforeUpdate 
updated  // 修改数据，会自动调用该方法
beforeDestroy  // 程序被杀死前的的遗言

destroyed  // 程序被杀死后

<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< script src= "./vue.min.js" > < / script >

</ head >
< body >
< div id= "app" >
{{msg}}
</ div >

< script >
var vm = new Vue({
el: '#app',
data:{
msg: 'hello wolrd'
},
beforeCreate () {
console. log( 'beforeCreate')
},
created () {
console. log( 'created')
},
beforeMount () {
console. log( 'beforeMount')
},
mounted () {
console. log( 'mounted')
},
beforeUpdate () {
console. log( 'beforeUpdate')
},
updated () {
console. log( 'updated')
},
beforeDestroy () {
console. log( 'beforeDestroy')
},
destroyed () {
console. log( 'destroyed')
}
})
< / script >
</ body >
</ html >

5.过滤器
外置的过滤器: 
Vue.filter('rever', function (value) {
     return value.split('').reverse().join('')
        })
        var vm = new Vue({
            el:'#app',
            data:{
                msg: 'abcdefg',
                title: 'ABDEEDJSOIFDOS',
                flag: 'hello world'
            },
内置的过滤器:
<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< script src= "./vue.min.js" > < / script >
< script >
window. onload = function () {


Vue. filter( 'rever', function( value){
return value. split( ''). reverse(). join( '')
})

var vm = new Vue({
el: '#app',
data:{
msg: 'abcdefsjoidijfowe',
title: 'SDJOIFSOIDFJSDOIFSFD'
},
filters: {
Upper : function( value){
return value. toUpperCase()
},
lower : function( value){
return value. toLowerCase()
}
}
})
}
< / script >
</ head >
< body >
< div id= "app" >
{{msg}}
{{ msg | Upper }}

{{title | lower}}

{{msg | rever}}

< div v-if= "" ></ div >
</ div >
</ body >
</ html >

6.自定义指令
外置指令:         
Vue.directive('fodd',{
            inserted:function(el){
                el.style.width = '100px'
                el.style.height = '100px'
                el.style.border = '1px solid gold'
            }
        })
        var vm = new Vue({
            el:'#app',
内置指令:
            
<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< script src= "./vue.min.js" > < / script >

</ head >
< body >
< div id= "app" >
< div v-mei >哈哈 </ div >
< p v-mei ></ p >
</ div >
< script >
var vm = new Vue({
el: "#app",
directives: {
mei:{
inserted : function( el){
el. style. width = '300px'
el. style. height = '300px'
el. style. background = 'pink'
}
}
}
})
< / script >
</ body >
</ html >

7.axios请求 数据交互
<!DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< script src= "./vue.min.js" > < / script >
< script src= "./axios.min.js" > < / script >
< script >
window. onload = function () {
var vm = new Vue({
el: '#app',
data: {
array: []
},
methods: {
func : function () {
var that = this
axios. get(
'http://localhost:3008/getMovieListData?message={"movieType":"in_theaters","pageIndex":2,"start":0,"count":10}'
)
. then( function ( response) {
// console.log(response)
vm. array = response. data. subjects
})
. catch( function ( error) {
console. log( error)
})
}
}
})
}
< / script >
</ head >

< body >
< div id= "app" >
< button @ click= "func" >请求数据 </ button >
< ul >
< li v-for= "item in array" >
{{item.title}}
</ li >
</ ul >
</ div >

</ body >

</ html >

猜你喜欢

转载自blog.csdn.net/weixin_42149982/article/details/81056435
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022