时间戳

首页 > 技术文章 > 🍖Vue 基础介绍

🍖Vue 基础介绍

songhaixing 2021-04-26 23:02 原文

引入

1.vue 基本使用的三个注意事项

  • 一个 html 页面中可以存在多个vue实例对象, 但是实例对象的变量名强烈建议唯一, 而且每一个 vue 对象负责一个特效功能
  • js 中所有的变量和语法都是区分大小写的, new Vue()
  • 建议实例化 vue 对象的代码写在 body 的最后面或者 head 里面, 免得出现html元素无法获取的错误出现

一.模板语法

插值语法 : {{ }}

  • 三目运算符(与三元表达式类似) 语法 : [条件] ? '条件成立显示左' : '条件不成立显示右'
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
    <ul>
        <li>字符串:{{msg}}</li>
        <li>数值:{{phone}}</li>
        <li>数组:{{array1}}</li>
        <li>对象:{{obj1}}</li>
        <li>字符串:{{link}}</li>
        <li>运算:{{(10+10)*10}}</li>
        <li>三目运算符:{{10>20?'true':'false'}}</li>
    </ul>
</div>
</body>
<script>
    // 对vue的核心对象vm进行实例化: vue.js的代码开始于一个Vue对象, 所以每次操作数据都要声明Vue对象开始
    var vm = new Vue({
        el:'#app',  // 设置当前vue对象要控制的标签范围, 方便接下来vue要操作的元素的选择符 element的缩写，表示元素
        data:{      // 可用于展示在HTML页面上的数据
            msg:'Hello word!',  // 字符串
            phone:15979302285,  // 数值
            array1:[1,2,3,4,5], // 数组
            obj1:{name:'shawn',age:333},  // 对象
            // 这里link展示的是字符串,后边有方法渲染成标签
            link:'<a href="http://www.baidu.com">摆渡一下</a>'  
        }
    })
</script>
</html>
  • 展示

image-20210425153453431

二.指令

文本指令

指令 说明
v-html 让HTML渲染成页面
v-text 标签内容显示js变量对应的值
v-show 放1个布尔值：为真, 标签就显示；为假, 标签就不显示
v-if 放1个布尔值：为真, 标签就显示；为假, 标签就不显示

0.v-show 与 v-if 的区别

  • v-show : 当值为 false 时, 标签还存在, 只是不显示, 因为设置了 display:none 属性
  • v-if : 直接进行的 DOM 操作, 对标签进行删除或插入

1.v-html : 渲染 HTML

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app2">
    <h1 v-html="link">链接渲染:{{link}}</h1>
</div>
</body>
<script>
    var vm2 = new Vue({
        el:'#app2',
        data: {
            link:'<a href="http://www.baidu.com">摆渡一下</a>'
        }
    })
</script>
</html>
  • 展示

vue22222

2.v-text : 标签内容显示 js 变量所对应的值

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app3">
    <h2 v-text="link"></h2>
    <h1 v-text="link2"></h1>
</div>
</body>
<script>
    var vm3 = new Vue({
        el: '#app3',
        data: {
            link: '<a href="http://www.baidu.com">摆渡一下</a>',
            link2:'人面不知何处去,桃花依旧笑春风'
        }
    })
</script>
</html>
  • 展示

image-20210425155431992

3.v-show : 显示 / 隐藏内容

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app4">
    <!--@click:点击触发handleClick方法-->
    <button @click="handleClick()">{{msg}}</button>
    <!--isShow为true则显示,为false则隐藏,隐藏只是增加了display:none 属性-->
    <h3 v-Show="isShow">梦里有我曾见过的月光⭐也有我如初待我的模样</h3>
</div>
</body>
<script>
    var vm4 = new Vue({
        el: '#app4',
        data: {
            isShow: true, // 默认为true(显示)
            msg:'点击隐藏(display:none)'
        },
        methods:{
            handleClick(){
                this.isShow = !this.isShow  // this指的是当前的vue对象,对其取反
                if (!this.isShow){
                    this.msg = '点击显示'  // 改变按键的文字显示
                }else {
                    this.msg = '点击隐藏(display:none)'
                }
            },
        },
    })
</script>
</html>
  • 展示

vue5555

对于按钮的字体显示也可以不使用if判断, 直接使用三目运算符来完成

<button @click="handleClick()" v-text='isShow?"隐藏":"显示"'></button>

4.v-if : 显示 / 删除内容

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app5">
    <!--@click:点击触发handleClick方法-->
    <button @click="handleClick()">{{msg}}</button>
    <!--如果isCreated为false则将该标签删除,如果为true则正常显示-->
    <h3 v-if="isCreated">梦里有我曾闻过的花香

推荐阅读