Vue简介

　　1.JavaScript框架

　　2.简化Dom操作

　　3.响应式数据驱动

Vue基础

通过下面代码引用vue:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

示例:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Vue基础</title>

    </head>

    <body>

        <div id="app">

            {{message}}

        </div>

    </body>


    <!-- 引用vue -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script type="text/javascript">

        var app = new Vue({

            el:"#app",

            data:{

                message:"Hello Vue!"

            }

        })

    </script>

</html>

编写一个简单Vue程序步骤:

  1. 导入开发版本的vue.js
  2. 创建Vue实例对象，设置el属性和data属性
  3. 实际简洁的模板把数据渲染到页面上

el:挂载点 

　　用于选中需要被vue渲染的部分，如: el:"#box"，样只会选中id为box中的内容进行渲染，" # "表示id选择器，el也可以选中其它css选择器，如: el:".red" 等等..

data: 状态|数据

　　可以在data里面定义一些数据变量(数组，对象，...)

插值:
　　{{ 10+20 }}  　　将数据渲染到页面元素中，不解析html标签

　　v-html 将数据渲染到页面元素中，可以解析html标签

vue指令

v-show

值为bool类型，为true表示显示元素，false表示隐藏元素(display:none)

v-if

值为bool类型，为true表示创建元素，false表示删除元素

v-bind

绑定属性，如 <div v-bind:class="red"></div>，通过v-bind就可以将div的类样式设置为red， <img v-bind:src="mySrc" />。

动态绑定class:

三目写法:<div v-bind:class=" 2>1? 'red' : 'yellow' "></div>    如果前面条件为true就应用red样式,false则应用yellow样式。

对象写法: 

　　<div v-bind:class=" classobj "></div>  　　　　html的内容

　　

　　data:{  　　　　　　　　　　　　js内容,data数据
　　　　classobj:{
　　　　　　red:true,
　　　　　　yellow: false, 
　　　　　　aaa:true
　　　　}
　　}

　　上面div将会同时应用red和aaa两个类样式，如果想不应用red样式，可以将classobj.red的值设置为false,该样式将不被应用。

数组写法: 

　　<div :class=" classarr "></div>  　　　　html的内容，缩写的方式

　　data:{  　　　　　　　　　　　　js内容,data数据
　　　　classarr:["red", "a", "b" ]      //数组中存放类样式名
　　}

　　在数组中存在的样式都将被应用，通过数组的 pop()方法删除数组元素（删除样式），push()方法添加数组元素（添加样式）

v-bind可以简写为" : "号，如 <div :class="red"></div>，用 : 号代替b-bind

绑定style属性：

　　三目写法:   <div :style=" 'background:'+  (1>2? 'red' : 'yellow' ) "></div> 　　

　　　　这里注意，如果样式是background-color的话要写成backgroundColor才行，所有样式中 - 的都要这样写

　　对象写法: 　　

　　　　<div :style=" styleobj "></div>  　　　　html的内容

　　　　data:{  　　　　　　　　　　　　js内容,data数据
　　　　　　styleobj :{
　　　　　　　　background: "red",
　　　　　　　　fontSize: "30px",  　　　　//对象属性就是需要应用的样式
　　　　　　}
　　　　}

　　数组写法:

　　<div :class=" stylearr "></div>  　　　　html的内容，缩写的方式

　　data:{  　　　　　　　　　　　　js内容,data数据
　　　　stylearr:[]      //数组
　　}

　　添加样式 stylearr.push({ backgroundColor:"red" }) 通过这种形式添加样式，删除样式还是通过操作数组就行

条件渲染：

v-if 和 v-else 的使用，当v-if中的条件为假的时候显示v-else里面的内容

这个有什么用呢？比如：有些购物软件，当你购物车没有添加商品是会显示 购物车空空如也，添加商品后再展示商品。这种就可以用v-if和v-else来实现

代码:

html内容:

        <div id="box">

            <div v-if="goods.length">

                <h2>商品列表</h2>

                <ul>

                    <li v-for="item in goods">{{ item }}</li>

                </ul>

                <button type="button" v-on:click="goods.pop()">删除一个商品</button>

            </div>

            <h2 v-else>商品空空如也!</h2>

        </div>

js内容:

        <script type="text/javascript">

            var vm = new Vue({

                el:"#box",

                data:{

                    goods:["苹果", "鼠标"]

                }

            })

        </script>

数组中有元素时显示v-if的内容，单击删除按钮会从数组中删除一个元素，当数组中元素被删除时将显示v-else的内容

v-else-if 有v-if、v-else那肯定少不了v-else-if

v-else-if使用方式跟v-else使用差不多，如果v-if为false继续判断v-else-if

代码演示:

　　　　　<div id="box">

            <div v-if="num === 1">1</div>

            <div v-else-if="num == 2">2</div>

            <div v-else>3</div>

        </div>


        <script type="text/javascript">

            var vm = new Vue({

                el:"#box",

                data:{

                    num:2

                }

            })

        </script>

只有条件 num===2 是为true的  所以页面显示的将是 2 ，还是挺好理解的

v-for 

语法:

<li v-for="变量名 in 数组或对象">{{ 变量名 }}</li>

in 可以改成 of 也是可以使用的

<li v-for="(变量名, index) in 数组或对象">{{ 变量名 }}</li>
index表示数组的索引

遍历数组或对象中的元素进行展示，一般配合列表使用

代码:

　　　　<div id="box">

            <h2>遍历数组内容进行展示</h2>

            <ol>

                <li v-for="item in datalist">{{ item }}</li>

            </ol>

            <h2>遍历对象内容进行展示</h2>

            <ul>

                <li v-for="each in dataobj">{{ each }}</li>

            </ul>

        </div>

        <script type="text/javascript">

            var vm = new Vue({

                el:"#box",

                data:{

                    datalist:["111", "222", "333"],

                    dataobj:{

                        name:"kk",

                        age:18,

                        sex:"男"

                    }

                }

            })

        </script>

结果:

可以看到列表的数量是取决于数组或对象中的元素数量。

　key  在使用v-for的时候可以设置key属性，一般key的值为data.id

　　跟踪每个节点的身份，从而重用和重新排序现有元素

　　理想的key值是每项都有的且唯一的id。data.id

　

数组更新检测

　　使用一下方法操作数组，可以检测变动

　　　　push()、pop()、shift()、unshift()、splice()、sort()、reverse()

　　filter()、concat()、slice()、map() ,新数组替换旧数组

filter()方法使用:
语法:

　　新数组 = 旧数组.filter(变量名=>条件)

条件为true才包含在新数组中，如: b = a.filter(item => item>1 ),是有数组a中元素大于1的才会被存放到数组b中

事件处理：
　　监听事件-直接触发代码

　　方法事件处理器-写函数

　　内联处理器方法-执行函数表达式 handleClick($event)  $event 事件对象

　　事件修饰符

　　按键修饰符

表单绑定

v-model 双向数据绑定

绑定text文本框:  <input type="text" v-model="mytext"/>

绑定checkbox多选框:  <input type="checkbox" v-model="checkgroup" value="游泳">

　　checkgroup 是数组类型，并且input标签必须设置value值，多个选择框绑定同一个数组

绑定 radio 单选框: <input type="radio" v-model="picked" value="Java">

　　picked为字符串类型，选中某一个单选框后会将它value的值给picked，多个选择框绑定同一个变量

v-model修饰符:

　　v-model.lazy 　　　　失去焦点后同步

　　v-model.number 　　只同步数字部分

　　v-model.trim 　　　　同步时去除前后空格

Vue基础（1）的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  4. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  5. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  6. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  7. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  8. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  9. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  10. Vue基础及脚手架环境搭建

    From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...

随机推荐

  1. JMeter5.0在windows（含插件安装）

    一.jmeter下载 前提:已经安装jdk8+ jmeter下载地址:http://jmeter.apache.org/download_jmeter.cgi 有Binaries和Source版本 前 ...

  2. Java中的常见锁（公平和非公平锁、可重入锁和不可重入锁、自旋锁、独占锁和共享锁）

    公平和非公平锁 公平锁:是指多个线程按照申请的顺序来获取值.在并发环境中,每一个线程在获取锁时会先查看此锁维护的等待队列,如果为空,或者当前线程是等待队列的第一个就占有锁,否者就会加入到等待队列中,以 ...

  3. JavaScript创建对象的方式汇总

    1.Object构造函数创建 // 1.Object构造函数创建 var Obj = new Object(); Obj.name='saoge'; Obj.say=function(){ conso ...

  4. 进程管理、PS命令、nohup命令

    1. Windows 下,扩展名为exe的文件,鼠标双击,运行,把这个程序正在运行的实例,称之为进程 Windows进程的信息可以通过 任务管理器看到 查看到:正在运行的计算器程序 Calculato ...

  5. Maven依赖管理之BOM

    目录 什么是BOM 一个BOM的格式 怎么使用BOM 通过parent引用 通过dependencyManagement引用 怎么查看依赖的某个BOM的具体清单 版本冲突时的一些规则 何为依赖调节 参 ...

  6. 实验 6:OpenDaylight 实验——OpenDaylight 及 Postman 实现流表下发

    一.实验目的 熟悉 Postman 的使用;熟悉如何使用 OpenDaylight 通过 Postman 下发流表. 二.实验任务 流表有软超时和硬超时的概念,分别对应流表中的 idle_timeou ...

  7. # 095 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 03 封装总结 01 封装知识点总结

    095 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  8. 085 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 04 构造方法调用

    085 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 04 构造方法调用 本文知识点:构造方法调用 说明:因为时间紧张,本人写博客过程中只是 ...

  9. VS2013 c++ 生成和调用DLL动态链接库（.def 方法已验证OK）

    转载:https://blog.csdn.net/zhunianguo/article/details/52294339 .def 方法 创建动态库方法: 创建动态库是生成 .dll .lib 两个个 ...

  10. c++ 十进制、十六进制和BCD的相互转换，与打印printf，与函数调用

    转载: https://blog.csdn.net/sjhuangx/article/details/49947179   c++ 十进制.十六进制和BCD的相互转换 https://blog.csd ...