vue入门及文本、时间、属性指令

Vue入门

引入方式

① CDN的方式引入

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

② 下载后导入

其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去

<script src="js/vue.js"></script>

补充

解释型的语言是需要解释器的

js就是一门解释型语言，只不过js解释器被集成到了浏览器中

所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样

vue介绍特性介绍

# vue介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
可以一点一点地使用它，只用一部分，也可以整个工程都使用它
js的框架，跟jq是一类东西
bootstrap：ui框架不是js框架（css样式）
vue中使用ui可以引入bootstrap，elementui(饿了么团队出的)，Vant(移动端ui：有赞)，ant-design-vue（ant-design本身是react的ui库）
# 版本：
	-主流：2.x
  -最新：3.x
# 官方有教程：https://cn.vuejs.org/v2/guide/
# M-V-VM思想 ----》mvc，mtv，mvp：安卓分层架构
Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中，js中变量
View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
以后不需要显示的使用dom操作，jquery的作用就不大了

# 组件化开发，单页面开发
	-vue项目---》index.html页面---》看到的变化，都是组件的切换
  -页面组件--》放了小组件
  -在index.html中替换 组件，就实现页面的变化

模板语法之插值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li>字符串：{{name}}</li>
        <li>数值：{{age}}</li>
        <li>数组：{{list1}}</li>
        <li>对象：{{obj1}}</li>
        <li>字符串：{{link1}}</li>
        <li>运算：{{10+20+30+40}}</li>
        <li>三目运算符：{{10>20?'是':'否'}}</li>
    </ul>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box', // 在box这个div中可以写 vue的语法
        data: {
            name: 'Darker', // 字符串
            age: 18, // 数值
            list1: [1,2,3,4],   // 数组
            obj1: {name: 'Darker', age: 19}, // 对象
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        }
    })
</script>
</html>

image

指令系统之文本指令

指令 释义
v-html 让HTML渲染成页面(可以渲染标签)
v-text 标签内容显示js变量对应的值
v-show 放1个布尔值：为真 标签就显示；为假 标签就不显示(隐藏)
v-if 放1个布尔值：为真 标签就显示；为假 标签就不显示(删除)

v-show与 v-if的区别：

v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入 标签

v-html：让HTML渲染成页面(可以渲染标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li v-html="link1"></li>
    </ul>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box', // 在box这个div中可以写 vue的语法
        data: {
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        }
    })
</script>
</html>

image

v-text：标签内容显示js变量对应的值(不会渲染标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li v-text="link1"></li>
    </ul>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box', // 在box这个div中可以写 vue的语法
        data: {
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
        }
    })
</script>
</html>

image

v-show：显示/隐藏内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个vue的html</title>
  <script src="js/vue.js"></script>
</head>
<body>
    
<div class="div_vue">
    <p v-show="show">我是show啊</p>
</div>

<script>
  let vm = new Vue({
      el: '.div_vue',
      data: {
          show: false
      },
  })
</script>
</body>
</html>

image

v-if：显示/删除内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个vue的html</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div class="div_vue">
    <p v-show="show">我是show啊</p>
    <p v-if="show1">我是if啊</p>
</div>

<script>
  let vm = new Vue({
      el: '.div_vue',
      data: {
          show: true,
          show1: true
      },
  })
</script>
</body>
</html>

image

指令系统之事件指令

指令 释义
v-on 触发事件（不推荐）
@ 触发事件（推荐）
@[event] 触发event事件（可以是其他任意事件） 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <h3>案例：控件通过按钮来控制显示和消失</h3>
    <button @click="handleClick()">点我</button>
    <br>
    <div v-if="isCreated">isCreated</div>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            isCreated:true
        },
        methods: {
            handleClick(){
              this.isCreated = !this.isCreated    // this指的是当前的vue对象
            },
        }
    })
</script>
</html>

image

属性指令

指令 释义
v-bind 直接写js的变量或语法（不推荐）
: 直接写js的变量或语法（推荐）

v-bind:class=’js变量’可以缩写成：:class=’js变量’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二天</title>
    <script src="js/vue.js"></script>
    <style>
        .c1_red {
            background-color: red;
        }
        .c2_green {
            background-color: green;
        }
        .font {
            font-size: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="div_id">
    <button @click="clickFunc">点我换颜色</button>
    <hr>
    <p :class="p_color">我是p标签</p>
    <button @click="clickImg">点我换美女</button>
    <hr>
    <p><img :src="p_src" alt=""></p>
    <p :style="p_style">我是测试style</p>
</div>

<script>
    let vm = new Vue({
        el:'#div_id',
        data:{
            p_color: 'c1_red',
            p_style:{fontSize:'50px', textAlign:'center'},
            p_src:'https://img0.baidu.com/it/u=3860886059,4240220326&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
        },
        methods:{
            clickFunc(){
                if (this.p_color=='c1_red'){
                    this.p_color = 'c2_green'
                }else {this.p_color = 'c1_red'}
            },
            clickImg(){
                if (this.p_src=='https://img0.baidu.com/it/u=3860886059,4240220326&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'){
                    this.p_src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F09%2F3a%2Fbc%2F093abce7b31f4c8ffdbf345375ff4abb.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652321528&t=3709d1c880107a53d265f936022f0d53'
                }else {this.p_src='https://img0.baidu.com/it/u=3860886059,4240220326&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'}
            },
        }
    })
</script>
</body>
</html>

image

Style 和 Class

属性指令中比较特殊的有style和class

class 可以对应字符串，数组(推荐)，对象

写法分别为: 'c1_red c2_green' ，['c1_red', 'c2_green'] ，{c1_red: true}

style 可以对应字符串，数组，对象(推荐)

写法分别为: 'font-size: 50px;text-align: center'，[{fontSize:'50px'}, {textAlign:'center'}]，{fontSize:'50px', textAlign:'center'}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二天</title>
    <script src="js/vue.js"></script>
    <style>
        .c1_red {
            background-color: red;
        }
        .c2_green {
            background-color: green;
        }
        .font {
            font-size: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="div_id">
    <button @click="clickFunc">点我换颜色</button>
    <hr>
    <p :class="p_color">我是p标签</p>
    <button @click="clickImg">点我换美女</button>
    <hr>
    <p><img :src="p_src" alt=""></p>
    <p :style="p_style">我是测试style</p>
</div>

<script>
    let vm = new Vue({
        el:'#div_id',
        data:{
            // p_color: 'c1_red',
            // 推荐
            p_color: ['c1_red', 'font'],
            // p_color: {c1_red:true, font:false},
            // p_style:'font-size: 50px;text-align: center',
            // p_style:[{fontSize:'50px'}, {textAlign:'center'}],
            // 推荐
            p_style:{fontSize:'50px', textAlign:'center'},
            p_src:'https://img0.baidu.com/it/u=3860886059,4240220326&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
        },
        methods:{
            clickFunc(){
                if (this.p_color=='c1_red'){
                    this.p_color = 'c2_green'
                }else {this.p_color = 'c1_red'}
            },
            clickImg(){
                if (this.p_src=='https://img0.baidu.com/it/u=3860886059,4240220326&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'){
                    this.p_src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F09%2F3a%2Fbc%2F093abce7b31f4c8ffdbf345375ff4abb.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652321528&t=3709d1c880107a53d265f936022f0d53'
                }else {this.p_src='https://img0.baidu.com/it/u=3860886059,4240220326&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'}
            },
        }
    })
</script>
</body>
</html>

条件渲染

指令 释义
v-if 相当于： if
v-else 相当于：else
v-else-if 相当于：else if 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二天</title>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
<!--    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">-->
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>-->
    <script src="js/vue.js"></script>

</head>
<body>
<div id="div_id">
<h2>您的成绩是</h2>
    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>=70">良好</p>
    <p v-else-if="score>=60">及格</p>
    <p v-else>不及格</p>
</div>

<script>
let vm = new Vue({
    el:'#div_id',
    data:{
        score:60,
    }
})
</script>
</body>
</html>

image

列表渲染

v-if+v-for+v-else控制购物车商品的显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if + v-for + v-else控制购物车商品的显示</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>我的购物车</h2>
    <button @click="show">刷新购物车</button>
    <br><br>
    <table v-if="!shopping_car.length==0">
        <tr>
            <td>商品名称</td>
            <td>价格</td>
        </tr>
        <tr v-for="item in shopping_car">
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
        </tr>
    </table>
    <table v-else>
        <tr>
            <td>商品名称</td>
            <td>价格</td>
        </tr>
        <tr>
            <td>暂无信息</td>
            <td>暂无信息</td>
        </tr>
    </table>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            isActive: false,
            shopping_car: []
        },
        methods: {
            show() {
                this.shopping_car = [
                    {name: 'Threadripper 3990X', price: '29999元'},
                    {name: 'NVIDIA RTX 8000', price: '59999元'},
                    {name: 'ROG ZENITH II EXTREME', price: '9999元'},
                ]
            }
        }
    })
</script>
</html>

image

v-for遍历数组(列表)、对象(字典)、数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for遍历数组(列表)、对象(字典)</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>数组（列表）for循环遍历</h2>
    <ul>
        <li v-for="(value,index) in list_test">{{index}} —— {{value}}</li>
    </ul>

    <h2>对象（字典）for循环遍历</h2>
    <ul>
        <li v-for="(value,key) in dic_test">{{key}} —— {{value}}</li>
    </ul>

    <h2>数组（列表）套对象（字典）for循环遍历</h2>
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>国籍</td>
        </tr>
        <tr v-for="info in summary_test">
            <td>{{info.name}}</td>
            <td>{{info.age}}</td>
            <td>{{info.gender}}</td>
            <td>{{info.country}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            list_test: ['First', 'second', 'Third', 'Forth', 'Fifth'],
            dic_test:{name: 'Darker', age: 18, gender: 'male'},
            summary_test: [
                    {name: 'Alan', age: 23, gender: 'male', country: 'America'},
                    {name: 'Ben', age: 15, gender: 'male', country: 'Australia'},
                    {name: 'Cindy', age: 12, gender: 'female', country: 'Japan'},
                    {name: 'Darker', age: 18, gender: 'male', country: 'China'},
                    {name: 'Elisa', age: 26, gender: 'female', country: 'Mexico'},
                ]
        }
    })
</script>
</html>

image

注意！在Vue中：

  • 数组的index和value是反的
  • 对象的key和value也是反的

key值 的解释

vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）

  • 在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
  • 页面更新之后，会加速DOM的替换（渲染）
  • :key="变量"

数组更新与检测

可以检测到变动的数组操作：

push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转

检测不到变动的数组操作：

filter()：过滤
concat()：追加另一个数组
slice()：
map()：

原因：

作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）

解决方法：
// 方法1：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"

// 方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）
Vue.set(vm.arrayList, 0, 'Darker')
posted @   zong涵  阅读(88)  评论(0)  编辑  收藏  举报
相关博文：
· vue之事件处理、双向绑定、表单控制、v-model进阶、购物车案例
· vue之创建项目、定义并使用组件、elementui的使用、与后端交互
· Vue快速入门
· Vue快速入门（一）
· Vue快速入门
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示