No.57 Vue---模板语法

一、模板语法

• 有了模板语法，页面的每个元素都可以动态处理了。
• 网址：https://cn.vuejs.org/

src下面的文件：

1.assets ：存放静态资源

2.components:存放组件

3.App.vue:根组件，组件入口。

4.main.js :主入口文件。

 

我们在HelloWorld.vue 文件中编写代码。

可以把原来不需要的内容删掉。

重新运行一下两行代码。

 访问网址：

显示：

 

 

 

1.1 文本

• 数据绑定最常见的形式就是使用“Mustache”(双大括号)语法的文本插值。
• 一般配合 js 中的 data() 设置数据。

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

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      message:"ceshi",
    }
  }
}
</script>

　1.2 原始HTML

• 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令　.

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

  <div>{{ rawHtml }}</div>  
  <div v-html="rawHtml"></div>

</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      message:"学习Vue的第一天",
      rawHtml:"<a href='https://home.cnblogs.com/u/bltstop'>个人博客</a>"
    }
  }
}
</script>

　　

 1.3 属性Attribute

• Mustache {{}}语法不能在 HTML 属性中使用，然而，可以使用 v-bind 指令.
• v-bind: 可以简写成 :

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

  <div>{{ rawHtml }}</div>  
  <div v-html="rawHtml"></div>
  <div v-bind:id="dynamicId"></div>

</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      message:"学习Vue的第一天",
      rawHtml:"<a href='https://home.cnblogs.com/u/bltstop'>个人博客</a>",
      dynamicId:10001,
    }
  }
}
</script>

　　

1.4使用JavaScript表达式

• 在我们的模板中，我们一直都只绑定简单的|property 键值，Vue.js 都提供了完全的JavaScript 表达式支持。说人话，就是{{}}里面可以直接运算。

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

  <div>{{ rawHtml }}</div>  
  <div v-html="rawHtml"></div>
  <div v-bind:id="dynamicId"></div>
  <div>add:{{ num + 10 }}</div>

</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      message:"学习Vue的第一天",
      rawHtml:"<a href='https://home.cnblogs.com/u/bltstop'>个人博客</a>",
      dynamicId:10001,
      num:10,
    }
  }
}
</script>

　

• 这些表达式会在当前活动实例的数据作用域下作为JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。