Javascript

vue框架-基础1-vue包引入，指令，模板语言

本文主要是介绍vue框架-基础1-vue包引入，指令，模板语言，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

vue学习

  • 从官方文档学习
  • https://cn.vuejs.org/v2/guide/index.html

vue介绍

Vue是一套用于构建用户界面的渐进式框架。
也就是可以边学习边开发，渐进式学习，关键在于应用
特点：
1，易于上手
2，是一种插件式的开发，
类似python中的flask，所以我喜欢使用flask+vue进行前后端分离的开发，
另外：
官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。

第一步，安装vue

安装方式1：
直接用 <script> 引入
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

安装方式2：cdn引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

安装方式3，
在用 Vue 构建大型应用时推荐使用 NPM 安装。
NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。
npm install vue

安装方式4，vue-cli
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。
CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。
如果你是新手，强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。

helloworld

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue liqian!'
      }
    })
  </script>
</body>
</html>
  • 声明式渲染
  • 上面这种html里面有一个id，利用{{ }} 模板语法
  • 然后再script里面新建一个vue，这里面进行了元素和数据绑定，
  • 这种就是声明式的渲染，
  • 我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，
    但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。
    我们要怎么确认呢？打开你的浏览器页面并修改 app.message 的值，你将看到上例相应地更新。
  • 注意我们不再和 HTML 直接交互了。
    一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。
    那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

第二步，指令v-bind

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

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

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });

      var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
  </script>
</body>
</html>
  • 遇到了一点新东西。你看到的 v-bind attribute 被称为指令。指令带有前缀 v-
  • 它们会在渲染的 DOM 上应用特殊的响应式行为。
  • 该指令的意思：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

条件v-if

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

js：
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
  • 很明显，可以通过seen: true或者false，进行控制是否显示
  • 至于这个指令是如何运行的，怎么就能达到了这个效果，现在不去深究，后面再说

循环v-for

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

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})
  • 很明显这是循环，很好
  • 在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

处理用户输入v-on

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
  • 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，
    通过它调用在 Vue 实例中定义的方法
  • 注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——
    所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。
    这是vue厉害的地方，不需要操作dom，就关心逻辑就可以了，

双向绑定 v-model

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
  • v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
  • 是可以修改的，修改了输入框里面的，然后上面显示的内容是跟随变化的，

指令列表

  • 上面介绍了一些常用的指令，
  • 那指令到底有多少？？https://cn.vuejs.org/v2/api/#指令
    1，v-text
    2，v-html
    3，v-show
    4，v-if
    5，v-else
    6，v-else-if
    7，v-for
    8，v-on
    9，v-bind
    10，v-model
    11，v-slot
    12，v-pre
    13，v-cloak
    14，v-once

注意两个缩写

v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

注意指令的配合

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

模板语言

  • 指令和模板语言要结合使用
文本
<span>Message: {{ msg }}</span>
语法 (双大括号) 的文本插值
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
<span v-once>这个将不会改变: {{ msg }}</span>

原始 HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
这篇关于vue框架-基础1-vue包引入，指令，模板语言的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航