春

新

乐

快

I am poor and inexperienced.

【VUE】02：Vue 基础语法

Lucky 2022-09-24 806

1、Vue的基本语法：

简单认识一下基本的语法

v-bind
v-if、v-else-if与v-else
v-show
v-for
v-on

（学习方法：先认识上面几种简单的基本语法，然后下面将会逐一进行代码 – 演示 – 说明）

2、v-bind

关于v-bind代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习Vue的v-bind</title>
</head>
<body>

<div id="app">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>

    <!--1.导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script type="text/javascript">
        // 创建一个Vue实例
        var vm = new Vue({
            el:"#app",
            /*Model：数据*/
            data:{
                message:"hello world"
            }
        });
    </script>
</div>
</body>
</html>

说明：

①、先不用急，我们先了解一下什么是“HTML中的attribute属性”

attribute：是HTML标签上的某个属性，如id、class、value、title等以及自定义属性

它的值只能是字符串，关于这个属性一共有三个相关的方法，setAttribute、getAttribute、removeAttribute。

②、我们然后再了解一下什么是“JavaScript中的property属性”

property：是js获取的DOM对象上的属性值，比如a，你可以将它看作为一个基本的js对象。这个节点包括很多property，比如value，className以及一些方法onclik等方法。

（主要内容）

③、看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute，它们会在渲染的 DOM 上应用特殊的响应式行为

在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”如果你再次打开浏览器的 JavaScript 控制台，输入 vm.message = ‘新消息’，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

解释：

元素节点的 title attribute 和 Vue 实例的 message property 保持一致

再次打开浏览器的 JavaScript 控制台，输入 vm.message = ‘新消息’，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新

3、v-if、v-else-if与v-else

关于v-if 与 v-else代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习Vue的v-if、v-else-if与v-else</title>
</head>
<body>

<!--view层，模板-->
<div id="app">
    <h1 v-if="type">A</h1>
    <h1 v-else>No</h1>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            type: true
        }
    });
</script>
</body>
</html>

说明：

v-if与v-else

1.在浏览器上运行，打开控制台
2.在控制台输入vm.type=false然后回车，你会发现浏览器中显示的内容会直接变成NO

关于v-if 、 v-else-if 与 v-else代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习Vue的v-if、v-else-if与v-else</title>
</head>
<body>

<!--view层，模板-->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>C</h1>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            type: 'A'
        }
    });
</script>
</body>
</html>

说明：

=== 的意思就是完全等于，数据类型、数据内容都要相等

在浏览器上运行，打开控制台
在控制台输入vm.type=”C”然后回车，你会发现浏览器中显示的内容会直接变成C

然后识别到内容会做出判断发生变化。

4、v-show

关于v-show代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习Vue的v-show</title>
</head>
<body>

<!--view层，模板-->
<div id="app">
    <p v-show="isShow">v-show的演示</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var  app = new Vue({
        el:"#app",
        data:{
            isShow:true
        }
    })
</script>
</body>
</html>

说明：

v-show指令的作用是：根据真假值切换元素的显示状态，原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏，指令后面的内容最终都会解析为布尔值，值为真(true)的时候元素显示，值为假(false)的时候元素隐藏，数据改变之后呢对应的元素的显示状态也是会同步更新的。

5、v-for

关于v-for代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习Vue的v-for</title>
</head>
<body>

<!--view层，模板-->
<div id="app">
    <li v-for="item in save">
        {{item.message}}
    </li>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        /*Model：数据*/
        data:{
            // 这里存储一个数组
            save:[
                {message:'大一的我'},
                {message:'大二的我'},
                {message:'大三的我'},
                {message:'大四的我'}
            ]
        }
    });
</script>
</body>
</html>

说明：

v-for遍历格式：v-for:”变量 in 数据”

例子：

v-for=”item in save”

save 是数据，每次遍历一个迭代名 item

加索引 index 代码：

<div id="app">
    <li v-for="(item,index) in save">
        {{item.message}}---{{index}}
    </li>
</div>

items是数组，item是数组元素迭代的别名，index是迭代的序号

6、v-on

关于v-on 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学习Vue的v-on</title>
</head>
<body>

<!--view层，模板-->
<div id="app">
    <!-- `study` 是在下面定义的方法名 -->
    <button v-on:click="study(event)">获取</button>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">

    var mv = new Vue({
            el: '#app',
            data: {
                name: 'Vue.js'
            },
            // 在 `methods` 对象中定义方法
            methods: {
                study: function (event) {
                    // `this` 在方法里指向当前 Vue 实例
                    alert('Hello ' + this.name + '!')
                    // `event` 是原生 DOM 事件
                    if (event) {
                        alert(event.target.tagName)
                    }
                }
            }
        })
</script>
</body>
</html>

说明：

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。