Vue基础 待我称王封你为后i 2022-02-25 09:46 211阅读 0赞 # vue入门 # ## 1.基本结构 ## <!-- 1.导入vue.js --> <script src="vue.js"></script> <!-- 2.vm实例 控制的元素 --> <div id="app"> <!-- 3.声明vm --> <script type="text/javascript"> var vm = new Vue({ el:"#app", //指定要控制的区域 data:{}, //对象,指定区域内用到的数据 methods:{}, //这里定义了一些方法函数 }) </script> <!-- 5.事件修饰符 --> <!-- .stop阻止冒泡 .prevent阻止默认行为 .capture捕获 .self自己身上执行 .once 只执行一次 --> ## 2.插值表达式和v-test/v-html ## 在控制区域内使用 <p>{ {msg}}</p> <p v-text="msg"></p> <p v-html="msg"></p> v-text和{ {}}一样 v-text不解释标签,v-html解释标签 解释html标签可能导致xss攻击,不要使用用户提供的内容插值 ## 3.v-cloak ## <style type="text/css"> [v-cloak]{ display: none; } </style> <p v-cloak>{ {msg}}</p> <!-- 刷新的时候,会看见未加载的值 { {msg}},使用v-cloak配合style,渲染完成前隐藏 --> ## 4.v-bind ## v-bind: 可以简写成: 1<input type="button" value="按钮" title="msg3"> 2<input type="button" value="按钮" v-bind:title="msg3"> 3<input type="button" value="按钮" v-bind:title="msg3+'123'"> title属性的效果是 鼠标移动过去停留,可以看见msg3的值 1 显示msg3 2 显示vm实例中 msg3的值 3 显示2基础上 加上 字符串 123 ## 5. v-on ## <!-- v-on: 绑定事件 ,绑定click点击事件,执行show方法--> <input type="button" value="按钮" v-on:click="show"> <!-- v-on:click="show" ,绑定点击事件可简写, @click="show"--> mouseover 鼠标覆盖事件 ## 6.v-model ## <!-- 双向数据绑定 --> <input type="text" style="width: 100%;" v-model="msg"> <!-- 只用在 表单控件中,更改表单控件的值,双向绑定的msg的值也会随之更改 --> ## 7.v-for ## <!--v-for item in list 循环元素 --> <p v-for="item in list">{ {item}}</p> <!-- 循环元素和下标,下标从0开始 --> <p v-for="(item,i) in list">{ {item}},{ {i}}</p> <!-- 元素是字典对象 --> <p v-for="user in list2">{ {user.id}} { {user.name}}</p> <!-- 如果写一个,默认是 value ,第三个位置是索引--> <p v-for="(value,key) in dict">{ {value}}>{ {key}}</p> <!-- v-for= count in 10 --> <!-- 迭代这个数字,就是从1到10 --> ## 8.v-for中 key的使用 ## <p v-for="item in list" v-bind:key="item.id"> <input type="checkbox"> { {item.id}}------{ {item.name}} </p> 绑定key,唯一标识,只能是数字和字符串。 可以简单的这样理解:加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果。 这样就添加元素后,勾选不会变化。 ## 9.v-if 和 v-show ## <input type="button" @click="flag=!flag" value="点我"> <h3 v-if="flag">这是v-if控制的元素</h3> <h3 v-show="flag">这是v-show控制的元素</h3> <!-- 都是控制 元素 显示的 --> <!-- if 是注释,如果false,不生成。 --> <!-- show是控制 display: none; --> ## 10.事件修饰符 ## <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue.js"></script> <style type="text/css"> .inner{ height: 150px; background-color: coral; } </style> </head> <body> <div id="app"> <div class="inner" @click="div1"> <input type="button" value="我是按钮" @click.stop="btn1" /> </div> </div> <script> var vm = new Vue({ el:"#app", data:{}, methods:{ div1(){ console.log("this is div") }, btn1(){ console.log("this is btn") } } }) </script> </body> </html> <!-- 点击div的时候会打印div1 ,点击按钮的时候会打印 btn1和div1--> <!-- 使用stop,阻止冒泡,阻止事件向下传递 --> <!-- <input type="button" value="我是按钮" @click.stop="btn1" /> --> <!-- .prevent 阻止默认行为,比如点击a标签跳转--> <!-- .capture 捕获触发事件机制,比如点击按钮,一般会先触发按钮,再触发按钮下面的div --> <!-- 如果使用capture,会触发div,再执行按钮 --> <!-- .self 只有点击自身才会执行,其他冒泡 捕获都不会执行--> <!-- .once 事件触发一次 --> ## 11.demo ## 实现 商品的添加与删除 实现 关键字过滤 搜索 关键点:把数据保存到一个新的数组中,使用新的数据渲染,原数据不变 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 导入vue.js --> <script src="lib/vue.js"></script> <!-- 导入bootstrap.css --> <link rel="stylesheet" href="lib/bootstrap.css"> <!-- 这里不需要Jquery,vue为我们免除了操作dom --> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <div class="panel-body form-inline"> <label > Id: <input type="text" class="form-control" v-model="id"> </label> <label > Name: <input type="text" class="form-control" v-model="name"> </label> <!-- vue中,绑定处理函数的时候,如果加了add(),就可以给函数传参了 --> <input type="button" value="添加" class="btn btn-primary" @click="add"> <label > 搜索关键字名字: <input type="text" class="form-control" v-model="keywords"> </label> </div> </div> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>Operation</th> </tr> </thead> <tbody> <tr v-for="item in search(keywords)" :key=item.id> <td>{ {item.id}}</td> <td>{ {item.name}}</td> <td>{ {item.ctime}}</td> <td><a href="" @click.prevent="del(item.id)">删除</a></td> </tr> </tbody> </table> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ id:'', name:'', keywords:'',//搜索关键字名字 list:[ {id:1,name:'奔驰',ctime:new Date()}, {id:2,name:'宝马',ctime:new Date()}, {id:3,name:'奥迪',ctime:new Date()}, ] }, methods:{ add(){// 添加商品 //获取到id name ,双向数据绑定,从data内获取 var car = { id:this.id,name:this.name,ctime:new Date()} this.list.push(car) this.id='' this.name='' }, del(id){ var index = this.list.findIndex(item =>{ if (item.id == id){ return true } }) console.log(index) this.list.splice(index,1) }, search(keywords){//把符合搜索关键字的数据,保存到一个新数据组中,返回 //var newList = [] // this.list.forEach(item=>{ // if(item.name.indexOf(keywords) != -1){ // newList.push(item) // } // }) //forEach some filter findIndex 这些都是数组新方法 //forEach 不能被终止,some通过return true 可以终止 //filter 符合条件的,得到新数组 // findIndex 找到对应那一项的索引 //都会对数据的每一项进行遍历 var newList = this.list.filter(item=>{ // if(item.name.indexOf(keywords) != -1 ) if (item.name.includes(keywords)){ return item } }) return newList } }, }) </script> </body> </html>
相关 vue基础 1.VueJs的介绍和MVVM模式介绍 1.什么是VueJS? Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。 Vue.js 的目标是通过尽可能简单的 爱被打了一巴掌/ 2022年11月29日 05:51/ 0 赞/ 138 阅读
相关 Vue基础 Vue入门 一、什么是vue? JavaScript的框架 框架是不同于向jQuery这样的js库,框架需要遵守它的规则,才能使用 二、 川长思鸟来/ 2022年11月22日 12:59/ 0 赞/ 200 阅读
相关 vue基础 Vue基础 1模板语法 插值: 插值表达式:\{ \{ \}\} ,将插值表达式中内容嵌入到页面中。v-text 纯HTML: v-html,识别html标 港控/mmm°/ 2022年10月25日 04:59/ 0 赞/ 113 阅读
相关 vue基础 Vue的安装 vue的兼容性: Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMA 系统管理员/ 2022年10月23日 11:11/ 0 赞/ 139 阅读
相关 vue 基础 1. 数据绑定 //方法1 <div id="app"> { {message}} </div> //方法2 偏执的太偏执、/ 2022年05月15日 13:28/ 0 赞/ 153 阅读
相关 Vue基础 vue入门 1.基本结构 <!-- 1.导入vue.js --> <script src="vue.js"></script> < 待我称王封你为后i/ 2022年02月25日 09:46/ 0 赞/ 212 阅读
相关 Vue基础 格式: v-xxx = “mustache语法” ; v-xxx = “msg”; v-xxx = “\{ \{msg\}\}” ×; Vue.js 的核心是一 古城微笑少年丶/ 2022年01月27日 12:27/ 0 赞/ 224 阅读
相关 Vue基础 本文笔记基于「千古壹号」的GitHub项目:https://github.com/qianguyihao/web 非商业用途自由转载,保持署名,注明出处! ------- ゝ一纸荒年。/ 2021年12月04日 10:02/ 0 赞/ 247 阅读
相关 Vue_基础 Vue\_基础 概述 示例 相关语法 动态样式 class style 概述 Vue (读音 /vjuː/,类似 ゞ 浴缸里的玫瑰/ 2021年10月06日 04:34/ 0 赞/ 311 阅读
还没有评论,来说两句吧...