vue基础使用

最新推荐文章于 2024-07-10 11:20:52 发布

战神王者

最新推荐文章于 2024-07-10 11:20:52 发布

阅读量395

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Juntil_hu/article/details/124434850

版权

Vue.js是一个渐进式框架，专注于视图层。本文介绍了Vue的基础使用，包括v-html、v-on、v-bind等指令的用法，以及绑定对象、数组和样式时的区别。讲解了v-if与v-show的差异以及v-for循环的应用。

摘要由CSDN通过智能技术生成

什么是Vue？

是一套用于构建用户界面的渐进式框架

vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

控件指令：

v-cloak:防止页面加载时出现闪烁问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*
          1、通过属性选择器 选择到 带有属性 v-cloak的标签  让他隐藏
       */
        [v-cloak]{
            /* 元素隐藏    */
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 2、 让带有插值 语法的   添加 v-cloak 属性
         在 数据渲染完场之后，v-cloak 属性会被自动去除，
         v-cloak一旦移除也就是没有这个属性了  属性选择器就选择不到该标签
		 也就是对应的标签会变为可见
    -->
    <div  v-cloak  >{
  {msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        //  el   指定元素 id 是 app 的元素
        el: '#app',
        //  data  里面存储的是数据
        data: {
            msg: 'Hello Vue'
        }
    });
</script>
</body>
</html>

v-text:

v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题

如果数据中有HTML标签会将html标签一并输出

注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
 <p v-text="text">{
  {mag}}</p>
</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        //  el   指定元素 id 是 app 的元素
        el: '#app',
        //  data  里面存储的是数据
        data: {
            msg: '你好，vue1',
            user:{"name":"张三","age":"18"},
            html: "<span>html标签在渲染的时候被解析</span>",
             <!-- 输出：-->
            message:"<span>通过双括号绑定</span>",
            <!-- 输出：-->
            text:"<span>html标签在渲染的时候被源码输出</span>"

        }
    });
</script>

会原样输出，不会解析里面的标签

v-html

用法和v-text 相似但是他可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
<!--        {
    {msg}}-->
<!--        {
    {user.name}}-->
<!--        {
    {user.age}}-->
<!--        <span v-pre>{
    {msg}}</span>-->
<!--        &lt;!&ndash;v-once可以显示第一次数据&ndash;&gt;-->
<!--        <span v-once>{
    {msg}}</span>-->
        <sp

最低0.47元/天解锁文章

战神王者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础使用

什么是Vue？是一套用于构建用户界面的渐进式框架vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合控件指令： v-cloak:防止页面加载时出现闪烁问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> &...
复制链接

扫一扫