使用VUE的准备工作,以及显示文本

Posted shenja

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用VUE的准备工作,以及显示文本相关的知识,希望对你有一定的参考价值。

需应用一个文件

<script src="~/Scripts/vue.js"></script>

VUE的js必要文件

vue在js中的代码展示,以及js代码的讲解

var vm=new Vue({
     //el表示关联的的位置 el: "#text",//#text表示找到ID为text的位置,也就是原生js的选择器
    //数据 {{msg}}对应的数据 data: { msg: "Hello Vue", msg1: "<h1>html</h1>", info:"你好" } })

 

VUE显示的几种方式

 @*V-text无闪动问题  推荐使用v-text给用户更好的体验*@
<div id="text">
    @*插入文本,比较方便快捷*@
    <div v-text="msg"></div>
    @*插入HTML片段,比较危险,容易导致xss攻击*@
    <div v-html="msg1"></div>
    @* v-pre 显示原始数据,跳过编译命令*@
    <div v-pre>{{msg}}</div>
    @*v-once 显示的内容只显示一次,过后就不具有响应式的效果
    应用场景:显示的信息后序不需要再修改,就可以使用v-once
    好处是,提高性能,不需要监听属性*@
    <div v-once>{{info}}</div>
</div>

技术图片这里对应上面HTML代码显示出的效果

 

 

VUE解决闪动问题

<style>
        /*解决数据动态绑定时,显示出源码,解决闪动问题

         背后的原理就是:先通过样式隐藏源码内容,然后再内存中进行值的替换,替换号之后再显示最终的结果
        */
        [v-cloak]{
            display:none;
        }
    </style>
<!-- 定义一个vue的管理区块,(MVVM中的View) -->
    @*对应上面的样式style 进行数据绑定无显示源码*@
    @*v-cloak解决闪动问题*@
    <div v-cloak id="app">
        <button v-on:click="getApiData">点击得到数据</button>
        <table class="table table-bordered">
            <tr>
                <td>姓名</td>
                <td>手机号</td>
                <td>详细地址</td>
                <td>省份</td>
                <td>市区</td>
            </tr>
            <tr v-for="item in name">
                <td>{{item.BGM_CNEE_Name}}</td>
                <td>{{item.BGM_CNEE_Phone}}</td>
                <td>{{item.BGM_CNEE_Site}}</td>
                <td>{{item.BGM_Province_Name}}</td>
                <td>{{item.BGM_City_Name}}</td>
            </tr>
        </table>
    </div>

 

 

以上是关于使用VUE的准备工作,以及显示文本的主要内容,如果未能解决你的问题,请参考以下文章

使用带有渲染功能的 Vue.js 3 片段

vue <router-link> 不想作为链接工作,它显示为简单的文本。我做错了啥?

Vue App 不显示反应器链接片段

通知未显示 - 已设置 chennel 以及小图标、标题和文本

片段从一开始就没有显示 |安卓工作室

回归 | js实用代码片段的封装与总结(持续更新中...)