VUE(下)

VUE指令

表单指令

数据的双向指令

v-model = "变量"

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

  • 普通表单元素用v-model直接绑定控制value值
  • 单一复选框，函数中的是true或false
  • 多个复选框中，函数中写的是空列表，如果列表中有字符串，表示默认选中这个选项
  • 单选框中，函数的值可以为字符串，这个字符串还是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. Jmeter（十一）函数助手

    可以在JMeter的选项菜单中找到函数助手对话框 我们可以从下拉列表中选择一个函数,并为其参数设定值.如图,表格的左边一列是函数参数的简要描述,右边一列是供用户填充参数的值.不同函数要求的参数也不同. ...

  2. Android_(控件)使用AlertDialog实现点击Button显示出多选框

    单击"更多"按钮,显示出多选框 运行截图: 程序结构 (本想通过Button中android:background使用drawable资源下的图片作为按钮背景,设计太丑就去掉了Σ( ...

  3. 深入使用Vue + TS

    深入使用TS 支持 render jsx 写法 这里一共分两步 首先得先让 vue 支持 jsx 写法 再让 vue 中的 ts 支持 jsx 写法 让 vue 支持 jsx 按照官方做法,安装Bab ...

  4. springboot中如何启动tomcat

    springboot启动时,会自动识别出当前环境是否是web环境还是非web环境. 默认的web环境的context(DEFAULT_WEB_CONTEXT_CLASS):org.springfram ...

  5. TCP主动打开 之 第三次握手-发送ACK

    假定客户端执行主动打开,并且已经收到服务器发送的第二次握手包SYN+ACK,在经过一系列处理之后,客户端发送第三次握手包ACK到服务器:其流程比较简单,主要是分配skb,初始化ack包并发送:需要注意 ...

  6. js监听某个元素高度变化来改变父级iframe的高度

    最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...

  7. koa 基础（十一）koa 中 koa-bodyparser 中间件获取表单提交的数据

    1.app.js /** * koa 中 koa-bodyparser 中间件获取表单提交的数据 * 1.npm install --save koa-bodyparser * 2.引入 const ...

  8. WOE1-Feature Selection 相关：一个计算WOE和Information Value的python工具

    python信用评分卡建模(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_ca ...

  9. ambari部署Hadoop集群（1）

    本例使用hortonworks 提供了 ambari 的安装方法,而且还很详细.以下是在 centos7 上的安装步骤. 基础配置: 1. 修改电脑的主机名 hostnamectl set-hostn ...

  10. c#根据配置文件反射

    由于项目中用到了反射,准备把各个类库都先写在配置文件中,然后读取配置文件,再对配置文件中配置的类库进行反射. 这样做的好处是各个类库保持独立,其中一个类库出现问题不会影响其他类库,更新项目时,只要更新 ...