初识Vue

Vue

概述

渐进式JavaScript框架

基本使用

  • 需要提供标签用于填充数据
  • 引入Vue.js库文件
  • 使用Vue语法做功能
  • 把Vue提供的数据填充到标签里

Hello world例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>    <!--插值表达式  计算 字符串拼接等-->
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',       //元素的挂载位置（css或者DOM选择器）
            data: {           //业务数据
                msg: 'Hello Vue'
            }
        });
    </script>
</body>

</html>

模板语法

指令

v-cloak指令（ 隐藏未编译的 Mustache 标签直到实例准备完毕 ）

提供样式，即在css中加入如下代码

<style>
        [v-cloak]{
            display: none;
        }
    </style>

在插值表达式所在标签中添加v-cloak指令

<div v-cloak>{{msg}}</div>

v-text指令（填充纯文本，表达简洁）

提供样式，即在HTML中加入如下代码

<div v-text='msg'></div>

结果也可以表现出‘Hello Vue’

v-html指令（填充HTML，但存在安全问题）

 data: {
                msg: 'Hello Vue',
                msg1: '<h1>Hello Vue</h1>'
            }

提供样式，即在HTML中加入如下代码

  <div v-html='msg1'></div>

结果对比表现为下：

v-pre(填充原始信息,跳过编译过程)

<div v-pre>{{msg}}</div>

结果显示为：

api查询

posted @ 2020-03-31 19:14  Jimmyons  阅读(78)  评论(0)    收藏  举报