vue指令
-
v-text:将文本渲染
-
v-html:将文本解析成html代码
-
v-if、v-show:条件渲染,条件为真时渲染数据为假时数据不显示
-
v-for(常用):循环遍历
-
v-on(常用):事件操作,可以简写成@
-
事件修饰符
-
.once:单次事件
-
.prevent:阻止默认事件
-
.stop:冒泡
-
.capture:捕获事件(谁有该事件就先触发谁)
-
.self:自身事件
-
-
-
v-model(重要):能够实现和表单控制的双向绑定
-
v-model的修饰符
-
.lazy:文本框、文本域失去焦点时,才会和框中的数据同步
-
.trim:失去焦点时过滤掉空格
-
.number:将输入的数据变为number类型,如果数据无法转换成number,那么就还是原始的类型
-
-
-
v-bind:主要用于属性的绑定,比如class属性、style样式,只要是属性就需要v-bind,可以动态改变样式
-
动态绑定class
-
以对象的形式绑定
<p v-bind:class="{pcolor:true}">人工智能无所不能</p>
-
以数组的形式绑定
<!-- 以数组的形式绑定:数组的格式是以数据的形式绑定 v-bind可以省略--> <p :class="[changecolor]">选择人工走向成功</p>
-
-
绑定style
-
直接绑定样式
<p v-bind:style="{color:'red'}">人工智能无所不能</p>
-
绑定data里的值
<!-- 绑定data里的值:值是以对象形式存在的 --> <p :style="data1">人工智能无所不能</p> data(){ return{ // 定义对象 data1:{ // 定义数据 color:"red", } } }
-
以数组的形式绑定
<p :style="[data1]">人工智能无所不能</p> data(){ return{ // 定义对象 data1:{ // 定义数据 color:"red", } } }
-
绑定计算属性
<!-- 以计算属性的形式绑定 --> <p :style="pcolor">人工智能无所不能</p> // 计算属性要写到computed里 和data methods是同级关系 computed:{ // 变量名是自己随便定义的 计算属性里必须有返回值 返回的内容就是上边定义的变量 // pcolor等同于 {color:"red"} pcolor:function(){ return{ color:'red', } } }
-
-
数据渲染的方式
-
插值表达式(常用):{{}}
创建vue组件
-
在src下的components文件夹里创建vue组件,组件名采用大驼峰(每个单词的首字母大写)命名法
-
打出vue的基本结构 快捷键 vue
-
在App.vue中引用注册使用自己创建的组件
-
启动项目 npm run serve
思路分析
渲染数据
-
先有数据 数据存放到data里
-
将数据渲染到页面 表格
-
实现对应的功能 比如删除 添加 修改 等
删除数据
-
给按钮绑定事件
-
实现删除的操作
添加数据
-
需求:就是在原有的数据上添加新的数据,增加
-
有添加的样式-----(表单--文本框、按钮)
-
将表单输入的内容添加成功
-
获取表单中的数据---数据的双向绑定
-
点击按钮将数据添加成功
-
给按钮绑定事件
-
将表单中输入的数据添加成功
-
单选、复选、下拉框都需要写value(值)
-
-
<!-- 添加样式 v-model:代表数据的双向绑定--> <p>编号:<input type="text" v-model="id1"></p> <p>姓名:<input type="text" v-model="name1"></p> <p>年龄:<input type="text" v-model="age1"></p> <p>性别:<input type="text" v-model="gender1"></p> <p> <!-- 给按钮绑定点击事件 --> <button @click="add">添加</button> </p> data(){ return{ id1:0, name1:'', age1:0, gender1:'', } }, // 数据的添加 add(){ // 实现添加的功能 将数据添加到数组里 数组名.push(数据) // 定义一个对象 用来作为添加的数据 var obj = {id:this.id1,name:this.name1,age:this.age1,gender:this.gender1} // 将obj添加到数组里 this.lst.push(obj) }
计算属性
-
定义2个文本框,一个代表商品的单价一个代表商品的数量,输入商品单价和数量在下边显示总价
<template> <div> <!-- 定义2个文本框,一个代表商品的单价一个代表商品的数量,输入商品单价和数量在下边显示总价 --> <!-- 数据的双向绑定,获取文本框中的内容 --> <!-- 数量小于3不打折 3件打8折 4件打7折 4件以上打6折 --> <p>单价:<input type="text" v-model="price"></p> <p>数量:<input type="text" v-model="num"></p> 总价为:{{totalmoney}} </div> </template> <script> export default { data(){ return{ price:0, num:0 } }, // 使用计算属性计算总价 计算属性必须有返回值 返回的内容等同于定义的变量 computed:{ // totalmoney等同于 money totalmoney:function(){ var money = 0; // 如果数量小于3原价 if(this.num < 3){ // 不打折 money = this.price*this.num }else if(this.num == 3){ // 否则如果数量等于3那么打8折 money = this.price*this.num*0.8 }else if(this.num == 4){ // 否则如果数量等于4那么打7折 money = this.price*this.num*0.7 }else if(this.num > 4){ // 否则如果数量大于4那么打6折 money = this.price*this.num*0.6 } return money } } } </script> <style> </style>
总结
-
v-model(特别重要)--数据的双向绑定
-
v-bind:绑定属性 用到的不是特别的多
-
计算属性(适用于 不能直接算出结果 稍微复杂一点的情况)
-