Vue学习日志2：数据绑定与样式绑定

1.基础用法

在Vue.js中，绑定是一个核心概念，用于在数据和DOM之间建立动态的联系。Vue.js 提供了多种方式来实现数据绑定，这些绑定方式可以分为数据绑定和事件绑定。
测试代码如下所示：

<template>
 <h3> Hollow World</h3> 
 <p>{{ msg1 }}</p>
 <div v-bind:class="msg2"> 属性绑定 </div>
</template>

<script >
export default
{
    data(){
        return {
            msg1:"模板语法",
            msg2:"active"
        }
    }
}
</script>

<style>
.active{
    color: red;
}
</style>

代码直接写在app.vue中，一共有三个段落：

<template></template>中为HTML标签对

<script></script>中为数据

<style></style>中定义样式

绑定实现的作用就是把，数据和样式导入到模型当中。绑定的数据使用{{}}，绑定的样式使用v:bind

实现效果图如下图所示：

2.Vue中的样式

在Vue.js的单文件组件（Single File Components, SFC）的 <style> 标签中，lang 属性用于指定使用哪种CSS预处理器或扩展语言来编写样式。不同的 lang 值代表不同的预处理器或语言支持，下面是一些常用的 lang 值及其含义：

• lang="css":

  • 默认值，表示使用标准的CSS语法来编写样式。
  • 不需要显式指定，因为 <style> 标签不带 lang 属性时，默认就是CSS。

• lang="scss":

  • 表示使用Sass的SCSS语法。SCSS是一种更接近CSS语法的Sass方言，支持嵌套规则、变量、混入等高级特性。
  • 需要安装 sass 或 sass-loader（用于Webpack）。在后面的日志中，将采用这种样式，安装指令为：

  • npm i sass

• lang="sass":

  • 表示使用Sass的缩进语法，另一种Sass语法风格。与SCSS不同，Sass缩进语法不使用花括号和分号，而是依赖缩进来组织代码。
  • 同样需要 sass 或 sass-loader。

• lang="less":

  • 表示使用Less语法。Less是一种CSS预处理器，支持变量、嵌套、混入等特性，并且语法与CSS非常接近。
  • 需要安装 less 和 less-loader。