Vue.js3学习篇--Vue模板应用

前段被迫创业

已于 2023-10-02 10:57:03 修改

阅读量822

点赞数

分类专栏：前端学习文章标签： vue.js 学习前端

于 2023-10-02 10:55:30 首次发布

本文链接：https://blog.csdn.net/weixin_63009369/article/details/133465908

版权

一,模板基础

1.模板插值

（1）基础插值

用法：模板插值是Vue中基础的模板用法，一般在HTML的标签中用“{ {}}”进行变量插值，其可以将当前组件中定义的变量的值插入指定位置，并且这种插值会默认实现绑定的效果，当我们修改变量的值时，其也可以同步反馈到页面的渲染上

例如一个基础的Vue应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--导入Vue-->
    <script src="https://unpkg.com/vue@next"></script>
    <title>Title</title>
</head>
<body>
<div style="text-align: center" id="Application">
    <h1>{
  {count}}</h1>
    <button v-on:click="clickButton">click</button>
</div>
<script>
    const App={
        data(){
            return{
                count:0
            }
        },
        methods:{
            clickButton(){
                this.count=this.count+1
            }
        }
    }
    Vue.createApp(App).mount("#Application")
</script>
</body>
</html>

效果：

当我们点击按钮时，次数累加

一般情况是，某些组件的渲染是由变量控制的，如果我们想让它一旦渲染后就不能够再被修改，这可以使用v-once指令实现，被这个指令设置的组件在进行变量插值时只会插值一次

如果将上面的代码改为如下后，无论怎么点击按钮，标题都不改变：

<h1 v-once>这里的渲染内容不会改变：{
  {count}}</h1>

（2）HTML代码插值

还有，如果要插入的文本为一段HTML代码时，直接使用双括号时就不能实现效果，双括号会将里面的变量解析成纯文本，写的代码什么样，渲染时就渲染什么样，

例如上面的例子定义App的数据：

插值是一个HTML代码

    data(){
            return{
                count:0,
                countHTML:"<span style='color: #FF0000'>0</span>"
            }
        }

插值位置：

  <h1>{
  {countHTML}}</h1>

再运行后，输出纯文本了：

效果不是我们想的，对于HTML代码的插值，需要用v-html指令完成：

    <h1>模板内容：<span v-html="countHTML"></span></h1>

效果：

（3）标签属性插值

对于标签属性的插值，双括号同样不好使，而是需要使用v-bind指令

例如：

<h1 v-bind:id="test">属性插值{
  {count}}</h1>

定义一个CSS样式：

 #h1{
            color: blue;
        }

然后在data中添加一个名为test的Vue组件属性：

 data(){
            return{
                count:0,
                countHTML:"<span style='color: #FF0000'>0</span>",
                test:"h1"
            }
        }