vue基础

最新推荐文章于 2024-07-14 17:09:06 发布

ProGrammerXu

最新推荐文章于 2024-07-14 17:09:06 发布

阅读量70

点赞数 1

分类专栏：新手文章标签： html vue.js html5

本文链接：https://blog.csdn.net/ProGrammerXu/article/details/119989262

版权

新手专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue基础语法（一）
Vue是一个渐进式的框架（可复用的组件、状态管理）
安装–
三种方式：
{直接引入CDN（开发环境/生产环境）}
下载和引入
npm安装

插值语法Mustache 也可以叫做双大括号 {{}}

v-once：该指令后面不需要跟任何表达式元素和组件只渲染一次，不随数据改变而改变

v-html：按照HTML语法进行解析

v-text: v-text=" msg " 同 {{ msg }}

5. v-bind:动态绑定：

动态绑定class------>数组、对象

比如：img标签中的src属性 a标签中的href属性

v-bind的语法糖简写为：class

class的动态绑定的对象形式:

:class={key1:value1,key2:value2}

类名：值（布尔类型），如果为true，则会为该标签添加上这个类名，为false，则不会添加数组语法：class= “【变量名】” 该变量声明在data中的数据
v-bind 动态绑定style

 <style>
    .title {
      font-size: 50px;
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->

  <!--'50px'必须加上单引号, 否则是当做一个变量去解析-->
  <!--<h2 :style="{fontSize: '50px'}">{{message}}</h2>-->

  <!--finalSize当成一个变量使用-->
  <!--<h2 :style="{fontSize: finalSize}">{{message}}</h2>-->
  <h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      finalSize: 100,
      finalColor: 'red',
    },
    methods: {
      getStyles: function () {
        return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
      }
    }
  })
</script>

</body>

对象语法：
:style="{ color : currentColor ,f ontsize; fontSize : fontSize + ’ px ’ }"
对象的key是css属性名称
对象的value是具体赋值

ProGrammerXu

关注

1
点赞
踩
1

收藏

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

Vue基础语法（一）Vue是一个渐进式的框架（可复用的组件、状态管理）安装–三种方式：{直接引入CDN（开发环境/生产环境）}下载和引入npm安装插值语法Mustache 也可以叫做双大括号 {{}}v-once：该指令后面不需要跟任何表达式元素和组件只渲染一次，不随数据改变而改变v-html：按照HTML语法进行解析v-text: v-text=" msg " 同 {{ msg }}5. v-bind:动态绑定：动态绑定class------>数组、对象比如.
复制链接

扫一扫