vue入门笔记-03-Vue基本语法 | 刘民锴的个人博客

学习笔记

发布日期: 2020-08-09

更新日期: 2021-01-12

文章字数: 435

阅读时长: 2 分

阅读次数:

Vue基本语法.

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

1、渲染v-bind.

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

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

<body>
<div id="app">
     <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<script>
   var vm = new Vue({
       el:"#app",
       data:{
           message: '页面加载于 ' + new Date().toLocaleString()
       }
    });
</script>
</body>

2、条件与循环.

v-if (v-else-if,v-else).

如果ok = true ==> Yes
否则 ==> No

<body>
<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>
<script>
   var vm = new Vue({
       el:"#app",
       data:{
           ok:true
       }
    });
</script>
</body>

如果 type === ‘A’ —> A
如果 type === ‘B’ —> B
否则 —> C

<body>
<div id="app">
    <h1 v-if=" type === 'A' ">A</h1>
    <h1 v-else-if=" type === 'B' ">B</h1>
    <h1 v-else>C</h1>
</div>
<script>
   var vm = new Vue({
       el:"#app",
       data:{
            type: 'A'
       }
    });
</script>
</body>

v-for.

<body>
<div id="app">
    <li v-for="(item,index) in items">
        {{item.data}}--{{index}}
    </li>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            //数组
            items: [
                {data:"java"},
                {data:"js"},
                {data:"vue"}
            ]
        }
    });
</script>
</body>

3、事件.

v-on.

<body>
<div id="app">
    <button v-on:click="sayHi">点击</button>
</div>
<script>
   var vm = new Vue({
       el:"#app",
       data:{
           message: "hello,vue!"
       },
       methods:{// 方法必须定义在Vue的 Method对象中
            sayHi: function () {
                alert(this.message);//this == vm这个对象
            }
       }
    });
</script>
</body>