Vue.js知识库(一):渲染数据、条件控制

vue.js​初体验:vue.js安装、渲染数据到页面、条件控制和双向绑定。
225阅读 · 2020-8-20 23:21发布

安装

直接在HTML文件中引入vue对应的js即可实现vue相关功能。

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者:

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

官方教程表示不推荐新手直接使用vue-cli,等熟悉node.js构建工具时再使用。所以此处没有vue-cli构建vue项目的方法。(该工具用于快速创建vue项目)

渲染数据到页面

方法一:声明式渲染

<html>
  <head>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <script>
        var app = new Vue({
          el: '#app',
          data: {
                message: 'Hello Vue!'
          }
        })
    </script>
  </body>
</html>

此时直接通过console修改app.message的值,页面也会同步更新。

方法二:动态绑定

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

此时直接通过console修改app2.message的值,页面也会同步更新。(vue会忽略-)

条件控制

v-if语句

根据条件进行逻辑判断。

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
</script>

v-for语句

用于循环处理某个数据。

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})
</script>

调用方法和双向绑定

v-on

用于添加一个事件监听器,指定特定事件调用某个方法。

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

v-model

进行数据双向绑定,可以修改的同时进行展示。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
</script>