Vue：基础语法

Posted 2021-03-08 fondwang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue：基础语法相关的知识，希望对你有一定的参考价值。

v-bind：

　　我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新！

　　我们还可以使用v-bind来绑定元素特性!

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>狂神说Java</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>

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

<script type="text/javascript">
    var app = new Vue({
        el: ‘#app‘,
        data: {
            message: ‘页面加载于 ‘ + new Date().toLocaleString()
        }
    })
</script>
</body>
</html>

　　你看到的 v-bind 等被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

　　如果你再次打开浏览器的 JavaScript 控制台，输入 app.message = ‘新消息‘，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。

v-if,v-else,v-else-if

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <h1 v-if="sore >= 90">A</h1>
    <h1 v-else-if="sore >= 80 && sore <90">B</h1>
    <h1 v-else-if="sore >= 70 && sore <80">C</h1>
    <h1 v-else-if="sore >= 60 && sore <70">D</h1>
    <h1 v-else-if="sore < 60">F</h1>
</div>

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

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            sore: 52
        }
    });
</script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>for</title>

</head>
<body>

<div id="app">
    <li v-for="item in message">
        {{item}}
    </li>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message: ["java","前端","Linux"]
        }
    });
</script>
</body>
</html>

v-on

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>

<div id="app">
    <button v-on:click="sayHi">点击俺</button>
</div>

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

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message: "hello, Vue12!"
        },
        methods:{ //方法必须定义在Vue的Method对象中，v-on: 事件
            sayHi: function (even) {
                alert(this.message);
            }
        }
    });

</script>
</body>
</html>

可去官方文档详细学习

以上是关于Vue：基础语法的主要内容，如果未能解决你的问题，请参考以下文章

JSP 基础语法

JSP开发中的基础语法

Vue3基础知识总结

[vscode]--HTML代码片段（基础版，reactvuejquery）