Vue03-基础语法指令

基础语法指令

1、v-bind

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

除了文本插值，我们还可以像这样来绑定元素 attribute：

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


<script src="../vue.js"></script>
<script>
    var vm = new Vue({
        el: '#hello',
        data: {
            msg: '页面加载于 ' + new Date().toLocaleString()
        }
    });
</script>

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

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

2、v-if、v-else 以及 v-else-if

条件判断语句

v-if 与 v-else

<div id="hello">
    <h1 v-if="msg">√</h1>
    <h1 v-else>×</h1>
</div>

<script src="../vue.js"></script>
<script>
    var vm = new Vue({
        el: '#hello',
        data: {
            msg: true
        }
    });
</script>

测试：

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

注：使用v-*属性绑定数据是不需要双花括号包裹的

v-else-if

三个等号在JS中表示绝对等于（就是数据与类型都要相等）

<div id="hello">
    <h1 v-if="msg==='a'">A</h1>
    <h1 v-else-if="msg==='b'">B</h1>
    <h1 v-else-if="msg==='c'">C</h1>
    <h1 v-else>D</h1>
</div>

<script src="../vue.js"></script>
<script>
    var vm = new Vue({
        el: '#hello',
        data: {
            msg: 'a',
        }
    });
</script>

3、v-for

for 循环

格式：

<div id="app">
    <li v-for="(数组元素迭代的别名,index) in 数组">
        {{数组名.属性名}}---{{index}}
    </li>
</div>

测试代码：

<div id="hello">
    <li v-for="(arr,index) in arrs">
        {{arr.msg}} -- {{index}}
    </li>
</div>

<script src="../vue.js"></script>
<script>
    var vm = new Vue({
        el: '#hello',
        data: {
            arrs: [
                {msg: 'Java'},
                {msg: 'C'},
                {msg: 'Python'}
            ]
        }
    });
</script>

在控制台输入vm.arrs.push({msg：'Go'})，尝试追加一条数据，你会发现浏览器中显示的内容会增加一条

4、v-on

监听事件
 emsp:事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件， 可以绑定到Vue中的methods中的方法事件!

<div id="hello">
    <button v-on:click="clickMe">点我看看？</button>
</div>

<script src="../vue.js"></script>
<script>
    var vm = new Vue({
        el: '#hello',
        data: {
            msg: '惊喜！！'
        },
        methods: {
            clickMe: function () {
                alert(this.msg)
            }
        }
    });
</script>

测试

5、还有其他的，去官网看！！！

https://cn.vuejs.org/