vue echarts数据变化重新渲染_Vue.js知识库（一）：渲染数据、条件控制

最新推荐文章于 2023-09-08 15:27:11 发布

weixin_39639653

最新推荐文章于 2023-09-08 15:27:11 发布

阅读量548

点赞数

文章标签： vue echarts数据变化重新渲染

内容提要：

vue.js安装、渲染数据到页面、条件控制和双向绑定。vue.js初体验。

安装
渲染数据到页面
条件控制
调用方法和双向绑定

1.1安装

直接在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项目)

1.2渲染数据到页面

方法一：声明式渲染

<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的值，页面也会同步更新。

方法二：动态绑定

<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会忽略-)

1.3条件控制

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>

1.4调用方法和双向绑定

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>

weixin_39639653

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue echarts数据变化重新渲染_Vue.js知识库（一）：渲染数据、条件控制

内容提要：vue.js安装、渲染数据到页面、条件控制和双向绑定。vue.js初体验。目录安装渲染数据到页面条件控制调用方法和双向绑定1.1安装直接在HTML文件中引入vue对应的js即可实现vue相关功能。<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>或者：<script src...
复制链接

扫一扫

vue echarts数据变化重新渲染_Vue.js知识库（一）：渲染数据、条件控制

“相关推荐”对你有帮助么？