VUE(下)

VUE指令

表单指令

数据的双向指令

v-model = "变量"

model绑定的变量,控制的是表单元素的value

  • 普通表单元素用v-model直接绑定控制value
  • 单一复选框,函数中的是truefalse
  • 多个复选框中,函数中写的是空列表,如果列表中有字符串,表示默认选中这个选项
  • 单选框中,函数的值可以为字符串,这个字符串还是value中的值,默认选中
<body>
<div id="app">
<form action="">
<!--属性指令:v-model="变量",v-model绑定的变量控制的是表单元素的value值 --> <!--普通表单元素,用v-model直接绑定变量控制value值-->
<input type="text" v-model="v1">
<input type="text" v-model="v1">
<textarea name="" id="" cols="30" rows="10" v-model="v1"></textarea>
<p>{{ v1 }}</p>
<hr> <!--单一复选框-->
同意:
<input type="checkbox" name="agree" v-model="v2">
<hr>
<!--多个复选框-->
男:<input type="checkbox" name="hobbies" value="male" v-model="v3">
女:<input type="checkbox" name="hobbies" value="female" v-model="v3">
哇塞:<input type="checkbox" name="hobbies" value="wow" v-model="v3">
<p>{{ v3 }}</p>
<hr> <!--单选框-->
中午吃啥:<br>
肉肉:<input name="food" type="radio" value="rourou" v-model="v4">
饭饭:<input name="food" type="radio" value="fanfan" v-model="v4">
<p>{{ v4 }}</p>
<hr>
<button type="submit">提交</button>
</form>
</div>
</body>

斗篷指令

解决网页加载闪烁

解决方法:

  • 可以先加载VUE环境
  • v-cloak,他就类似于一个属性,有VUE环境,他这个属性就被取消了!!!
<style>
[v-cloak] {
display: none;
}
</style>

条件指令

v-if = "true|false":为假时,在页面上不渲染,可以隐藏标签中的信息

v-sow = "true|false":为假时,页面中用display:none渲染,虽然没有展示,但是仍在页面结构中

v-if是一个家族

  • v-if
  • v-else-if

以上两个当为假时,即等于0时,v-else出现,且不需要条件,一旦分值成立,下分支就会被屏蔽

  • v-else
   <p v-if="false">if指令</p>
<p v-show="false">show指令</p>
<p v-if="v1 === '1'">if分支</p>
<p v-else-if="v1 === '2'">elif分支1</p>
<p v-else-if="v1 === '3'">elif分支2</p>
<p v-else>else分支</p>

循环指令

语法:

v-for = "成员的容器"

  • 字符串循环渲染:可以只遍历值,也可以遍历值与索引
  • 数组循环渲染:
  • 对象循环渲染:可以遍历值、可以遍历值与key、可以遍历值,key,index
 <!--1、字符串循环渲染: 可以只遍历值,也可以遍历值与索引-->
<p>
<span v-for="v in title">{{ v }}</span>
</p> <p>
<span v-for="(v, i) in title">
<span v-if="i != 0"> | </span>
{{ v }}
</span>
</p> <!--2、数组循环渲染: 可以只遍历值,也可以遍历值与索引-->
<div>
<p v-for="(v, i) in arr">第{{ i }}元素:{{ v }}</p>
</div> <!--3、对象循环渲染: 可以只遍历值,也可以遍历值与键,还可以遍历值、键与索引-->
<div>
<p v-for="v in people">{{ v }}</p>
</div>
<div>
<p v-for="(v, k) in people">{{ k }}:{{ v }}</p>
</div>
<div>
<p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
</div>
<br> <div>
<div v-for="(stu, i) in stus">
<hr v-if="i != 0">
<p v-for="(v, k) in stu">{{ k }}:{{ v }}</p>
</div>
</div>

VUE成员

分隔符成员

用来修改插值表达式符号:delimiters

<script>
new Vue({
el: '#app',
data: {
num: 100
},
delimiters: ['{', ']}'],
})
</script>

计算属性成员

computed:里面是函数

  • 他定义的是方法属性,data中定义的也是属性,所以不需要重复定义
  • 方法属性的值来源于绑定方法的返回值
  • 方法属性必须在页面中渲染后,绑定的方法才会被调用
  • 方法中出现的所有变量都会被监听,任何变量发生值更新都会调用一次绑定方法,重新更新一下方法属性的值
  • 方法属性值不能手动设置,必须通过绑定的方法进行设置
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
// res: '结果',
},
computed: {
res () {
return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';
}
}
})
</script>

属性的监听

watch:

  • 给已有属性设置监听方法
  • 监听的属性值一旦发生更新,就会调用监听方法,在方法中完成相应逻辑
  • 监听方法不需要返回值,返回值只有主动结束方法的作用
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: '',
},
watch: {
// 1、watch中给已有的属性设置监听方法
// 2、监听的属性值一旦发生更新,就会调用监听方法,在方法中完成相应逻辑
// 3、监听方法不需要返回值(返回值只有主动结束方法的作用)
full_name() {
if (this.full_name.length === 2) {
k_v_arr = this.full_name.split('');
this.first_name = k_v_arr[0];
this.last_name = k_v_arr[1];
}
}
}
})
</script>

补充

  • sessionstorage的生命周期与页面标签绑定,当标签页关闭,数据库被清空eg:刷新页面不会重新开始

  • localstorage:前台永久数据库eg:关闭浏览器不会重新开始,而是停留在浏览的位置

  • 数组操作:push、pop、unshift、shift、splice

splice可以完成数组的增删改

let arr[1,2,3,4]
arr.splice(0,0,0) //以索引0开始,操作长度为0、操作的结果为0

VUE(下)的更多相关文章

  1. vue 下实现 echarts 全国到省份的地图下钻

    vue 下实现 echarts 全国到省份的地图下钻 项目地址:https://github.com/cag2050/vue_echarts_v3_demo

  2. checked、disabled在原生、jquery、vue下不同写法

          以下是原生和jquery <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  3. 浅谈Vue下的components模板

    浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...

  4. vue下实现input实现图片上传,压缩,拼接以及旋转

    背景 作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是需要为用户保存上传的图片,很多小白遇到这个问题的时候,都会虎躯一震,以为会是一个棘手的问题,当你读完这篇文章的时候 ...

  5. Vue下路由History mode导致页面无法渲染的原因

    用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件( ...

  6. 八:Vue下的国际化处理

    p { margin-bottom: 0.25cm; line-height: 120% } 1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-de ...

  7. vue下拉搜索

    vue版本是1.0.21 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. 八:前端---Vue下的国际化处理

    1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹. -save是指将 ...

  9. vue下assets下的静态资源和static下的静态资源的区别

    区别一(最终位置) assets文件是src下的,所以最后运行是需要进行打包,而static文件不需要打包直接放在最终的文件中了 区别二(引用方式) assets中的文件在vue中的template/ ...

随机推荐

  1. ERROR: virtualenvwrapper could not find virtualenv in your path

    环境: Ubuntu 18.04 Python3 使用pip3安装virtualenv和virtualenvwrapper两个包,ubuntu18.04中,用户使用pip安装的包在~/.local/下 ...

  2. 微信小程序_(组件)flex布局

    小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 定义布局:display:flex flex容器的属性: 一.flex-direction: ...

  3. CodeForces 724C Ray Tracing(碰撞类,扩展gcd)

    又一次遇到了碰撞类的题目,还是扩展gcd和同余模方程.上次博客的链接在这:http://www.cnblogs.com/zzyDS/p/5874440.html. 现在干脆解同余模直接按照套路来吧,如 ...

  4. (十六)C语言之函数

  5. SRS之接收推流线程:recv

    SrsPublishRecvThread.SrsRecvThread.SrsReusableThread2.SrsThread 之间的关系图 1. recv 线程函数:SrsThread::threa ...

  6. Java-数据类型与编码(ASCII、Unicode 和 UTF-8)

    机械硬盘硬件结构(了解)https://diy.pconline.com.cn/cpu/study_cpu/1009/2215404_all.html 一.数据储存单位 1.bit(位) https: ...

  7. meta的相关属性

    <!DOCTYPE html> H5标准声明,使用 HTML5 doctype,不区分大小写<head lang=”en”> 标准的 lang 属性写法<meta cha ...

  8. golang mysql 如何设置最大连接数和最大空闲连接数

    本文介绍golang 中连接MySQL时,如何设置最大连接数和最大空闲连接数. 关于最大连接数和最大空闲连接数,是定义在golang标准库中database/sql的. 文中例子连接MySQL用的SQ ...

  9. LC 683. K Empty Slots 【lock,hard】

    There is a garden with N slots. In each slot, there is a flower. The N flowers will bloom one by one ...

  10. pandas之时间序列(data_range)、重采样(resample)、重组时间序列(PeriodIndex)

    1.data_range生成时间范围 a) pd.date_range(start=None, end=None, periods=None, freq='D') start和end以及freq配合能 ...