码迷,mamicode.com
首页 > 其他好文 > 详细

Vue基础(1)

时间:2020-02-13 15:19:11      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:else   动态绑定   false   技术   素数   script   vue   cat   aaa   

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)

标签:else   动态绑定   false   技术   素数   script   vue   cat   aaa   

原文地址:https://www.cnblogs.com/DepthCh/p/12264373.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!