vue语法整理

最新推荐文章于 2024-05-30 14:27:51 发布

机场德克士双人套餐事件

最新推荐文章于 2024-05-30 14:27:51 发布

阅读量210

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_73495603/article/details/129290698

版权

Vue简介

Vue 是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue特点
1. 遵循MVVM模式

2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

3、Vue的基本使用
el：挂载

data：模型数据

msg：数据

vue的基本使用

</head>

<body>

<div id="app">

<p>{ {msg}}</p>

</div>

<div id="add">

<p>{ {msg}}</p>

</div>

>

<script src="./vue.js"></script>

<script>

//实例化一个vue

new Vue ({

el:'#app',

data:{

msg:'xxx'

}

})

</script>

</body>

</html>

v-show的使用

</head>

<body>

<div id="app">

<div v-show="money>=1000"> 吃火锅</div>

<div v-show="money>=2000">海底捞</div>

<div v-show="money>=500">饭</div>

<div v-show="money<500">滚</div>

<hr>



<div v-show="age>=18">酒吧</div>

<div v-show="age<18">捡垃圾</div>

</div>

<script src="./vue.js"></script>

<script>

new Vue({

el:'#app',

data:{

money:1500,

age:25

}

})

</script>

</body>

<body>



<div id="app">

<div v-show="display">我是由v-show控制的</div>

<div v-if="display">我是由v-if控制的</div>

</div>

<script src="./vue.js"></script>

<script>

new Vue({

el:'#app',

data:{

display:ture

}

})

</script>



</body>

</html>

v-on

</head>

<body>

<div id ="app">

<button v-on:click="fn1">点我撒 </button>

<button v-on:dblclick="fn2">666</button>

<button v-on:mouseenter="fn3">咦~</button>

</div>

<script src ="./vue.js"></script>

<script>

new Vue({

el:'#app',

//vue中放方法的地方

methods:{

fn1(){

alert('干嘛')

},

fn2(){/

alert('什么毛病')

},

fn3(){

alert('烦死了')

},

}

})

</script>

</body>

</html>

v-model

<body>

<div id="app">

<input type="text" v-model="msg">

<p>{ {msg}}</p>

<select v-model="fruit">

<option value="apple">苹果</option>

<option value="orange">橘子</option>

<option value="banana">香蕉</option>

</select>

<input type="checkbox" v-model="chk">

</div>

<script src="./vue.js"></script>

<script>

new Vue ({

el : '#app',

data :{

msg:'',

fruit:'',

chk:ture

}

})

</script>

</body>

</html>

v-if

<body>

<div id="app">

<div v-if="money>=1000"> 吃火锅</div>

<div v-else-if="money>=2000">海底捞</div>

<div v-else-if="money>=500">饭</div>

<div v-else>滚</div>

<hr>



<div v-if="age>=18">酒吧</div>

<div v-else>捡垃圾</div>

</div>

<script src="./vue.js"></script>

<script>

new Vue({

el:'#app',

data:{

money:1500,

age:25

}

})

</script>

</body>

</html>

v-for中key的作用

<body>

<div id="app">

<button @click="list.splice(1,0,{id:4,name:'yy'})">添加</button>

<ul>

<li v-for="item in list":key="item.index">

<input type="checkbox">

<span>{ {item.name}}</span>

</li>

</ul>



</div>

<script src="./vue.js"></script>

<script>

new Vue ({

el:'#app',

data:{

list:[

{id:1,name:'ww'},

{id:2,name:'rr'},

{id:3,name:'tt'},

]

}

})

</script>

</body>

</html>

v-for遍历数组

<body>





<div id="app">

<b

最低0.47元/天解锁文章