vue的基础练习实例

数据单向驱动，双向数据绑定，多选的实现，循环的实现，对象的概念，条件判断，对象的使用，事件的使用，预先加载省份信息。

<!--复制进入环境运行时，记得引入vue.js文件，放在js文件中-->
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><div id="app"><h5>１．数据单向驱动文本:--{{}}--</h5>{{ message }}<h5>２．数据单向驱动属性:--:title--</h5><p :title="message">{{ message }}</p><h5>3.使用 v-model 实现双向数据绑定:--v-model--</h5><input type="checkbox" v-model="ok">{{ok}}<h5>4.多选的实现:--v-model--</h5><input type="checkbox" value="1" v-model="ids">1<input type="checkbox" value="2" v-model="ids">2<input type="checkbox" value="3" v-model="ids">3<input type="checkbox" value="4" v-model="ids">4<input type="checkbox" value="5" v-model="ids">5<h5>５．循环的实现:--v-for---</h5><template v-for="n in nums"><input type="checkbox" :value="n" v-model="ids">{{n}}</template><h5>6.对象的概念:--user.---</h5><div>用户名：<input type="text" v-model="user.id">密　码：<input type="password" v-model="user.pwd">{{user}}</div><h5>7.条件判断:--v-if---</h5><div>勾选显示内容:<input type="checkbox" v-model="ok"><span　v-if="ok">我在故我思</span></div><h5>８．事件的使用:--mouseover,mouseout,click--</h5><div style="display:flex;flex-direction: row;" ><div  @click="myfun" v-on:mouseover="onover($event)" @mouseout="onout($event)" v-for="n in 10" style="height: 80px;width:30px;border:1px solid blue;margin:5px;">{{n}}</div></div><h5>9.预先加载省份</h5><select v-model="prov"><option value=“-1” >请选择</option><option v-for="item in mydata" :value="item.value">{{item.name}}</option></select>{{prov}}</div><script src="js/vue.min.js"></script><script>const vm = new Vue({el: '#app', //vue渲染到元素data: { //定义vue中的数据//文本信息message: "Hello Vue!",//数据类型ok: false,show: false,//数组ids: [],//数组nums: [25, 56, 54, 57, 8, 9, 62, 32, 12],//对象user: {},mydata:[],prov:'',},methods: { //定义ｖｕｅ中的方法onover(e){e.target.style.backgroundColor='red';},onout(e){e.target.style.backgroundColor='transparent';},myfun(){alert(parseInt(Math.random()*10));}},mounted(){ //渲染完成之后的回调函数（钩子函数）this.mydata=[{value:'北京市',name:'北京市'},{value:'陕西省',name:'陕西省'},{value:'重庆市',name:'重庆市'},{value:'广东市',name:'广东市'},{value:'甘肃市',name:'甘肃市'},  ]}});</script>
</body></html>

运行结果展示：

vue的基础练习实例相关推荐

Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶第一篇
https://www.cnblogs.com/pengfei-nie/p/7107449.html
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
Vue的基础认知一---构建环境/v指令的使用
大家新年好啊,不对,今天是情人节呢,哈哈哈,祝大家节日快乐,你们是不是都出去约约约了啊,好吧,你们都去玩吧,我在家码代码,汗~讲真,这大过年的实在是不愿意学习啊,可是眼看着好久没写博文了,心里有点过意 ...
❤️《Vue前端基础框架集合从入门到高级》（小白也可学，建议收藏）❤️
<Vue前端基础框架集合从入门到高级>,小白也可学文章目录 <Vue前端基础框架集合从入门到高级>,小白也可学 ❤️一.前端核心分析 ❤️1.1.概述 ❤️1.2.前端三要素 ...
后端学习前端 Vue 框架基础知识
文章目录一.Vue 基础语法学习 1.Vue 语法指令 2.Vue 实例属性 (1)el (2)data (3)methods (4)computed 3.事件修饰符 4.按键修饰符 5.Vue实例 ...
使用Vue3学习Vue的基础知识
创建 Vue 应用 vue的安装有多种方式,本文只讨论基础知识,其他安装方式请自行查阅官网 https://v3.cn.vuejs.org/guide/installation.html 本文使用CD ...
Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
Vue的基础入门及使用
Vue的基础入门及使用第一章 Vue核心 1.1 Vue的基本认识 1.1.1 官网英文官网:https://vuejs.org/ 中文官网:https://cn.vuejs.org/ 1.1.2 ...
视频教程-Vue零基础到精通视频教程-Vue
Vue零基础到精通视频教程从事多年web前端开发和教育培训(线上)工作,主要从事web前端工作.php后端工作,在pc端和移动端开发都具有丰富经验,同事有响应式布局.vue框架开发.微信小程序开发经 ...

vue的基础练习实例

vue的基础练习实例相关推荐

最新文章

热门文章