前端学习vue：2.模板语法

要学会多看文档：cn.vuejs.org

模板语法 | Vue.js (vuejs.org)

有时间了可以把官方文档都没事看一遍，预览预览。

在 vscode里打开创建的vue-demo，npm run serve 运行在浏览器看效果。

然后先来看一下左边的目录：

src下的components 里有个 HelloWorld.vue 文件，要写代码的地方。

目录下 assets 放静态资源，公共css文件，图片资源。

App.vue 根组件，所有组件从这里引入显示。

main.js 所有程序的入口。

看下面的代码：

<template>
  <div class="hello">
    <h3>学习Vue:模板语法</h3>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>
 

<template> 这组标签里是写页面的 写html。

<script> 这组标签里是写逻辑的。

文本，动态渲染，用双花括号来实现。这里msg值是根据 data 函数里的赋值去做的动态改变。类似这样的写法就是模板语法，用别人的东西就要遵循别人的规范。这里msg是变量，根据不同的值显示的内容也不一样。

<template>
  <div class="hello">
    <h3>学习Vue:模板语法</h3>
    <p> {{ msg }} </p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      msg:"消息提示"
    }
  }
}
</script>

原始HTML

        双大括号会将数据解释为普通文本，而非HTML代码，为了输出真正的HTML，

你需要使用v-html 指令。

代码如下：

<template>
  <div class="hello">
    <h3>学习Vue:模板语法</h3>
    <p> {{ msg }} </p>
    <div> {{ rawHtml }} </div>
    <div v-html="rawHtml"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      msg:"消息提示",
      rawHtml:"<a href=‘http://www.ibaizhan.com’>百战</a>"
    }
  }
}
</script>

属性 Atribute.

        模板语法(Mustache) 不能在HTML属性中使用，然而可以使用 v-bind指令。

比如 class、id...标签里的属性，都有可能变化，如果属性想发生动态变化的话 可以使用 v-bind:id 就把id变成修改的了。

v-bind可以直接简写成 ： 冒号。

就变成 :id 去修改了。效果是一样的。

代码如下：

<template>
  <div class="hello">
    <h3>学习Vue:模板语法</h3>
    <p> {{ msg }} </p>
    <div> {{ rawHtml }} </div>
    <div v-html="rawHtml"></div>
    <div v-bind:id="dynamicId"> </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      msg:"消息提示",
      rawHtml:"<a href=‘http://www.ibaizhan.com’>百战</a>",
      dynamicId:10001
    }
  }
}
</script>

打开浏览器预览效果 右击在弹出菜单选择检查，查看id是否变为10001。

通过上面几个，页面的内容都可以进行动态展示了。

也支持完整的表达式。

参考资料：

2024最新版web前端开发140集零基础入门html5+css3+js全套教程 | 从入门到到就业全套前端课程_前端开发_web前端