Vue快速入门02

模板语法

app.vue 根组件

asset 文件夹。静态资源文件夹

1.文本

通过双花括号来展示动态文本

{{  msg }}  胡子表达式

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg= '欢迎使用VueJs'/>
  <span>{{ msg2 }}</span>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return {
      msg2:'欢迎使用VueJS'
    }
  }
}

一般配合data(){ return{} }使用

2.原始HTML

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

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg= '欢迎使用VueJs'/>
  <!-- <span>{{ msg2 }}</span> -->
  <p > <span v-html="msg3"></span></p>
  <div>{{ msg3 }}</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return {
      msg2:'欢迎使用VueJS',
      msg3:'<a href="https://www.baidu.com">百度</a>'
    }
  }
}
</script>

v-html 能解析html代码。和innerhtml和innertext区别类似

属性Attribute

双花括号的形式不能处理html标签的属性，可以使用v-bind:属性名，来处理属性。简写  :属性名

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld :msg="msg"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return {
      id:'123',
      msg:'欢迎使用VueJs'
    }
  }
}
</script>

4.使用js表达式

双花括号里可以使用js表达式

{{ num+10}}
{{ i++}}
{{ i==1?true:false}}

必须是单个表达式，不能是一个语句。

好的，那么我来总结一下，这篇笔记主要记了什么。

1.为了动态显示文本内容。可以使用  {{ msg }}  来显示变量。msg 由  data(){ return {msg:''}}  中取

2.v-html 能够解析html标签。<p v-html="msg2"></p>    data(){ return {msg2:'<a href="https://www.baidu.com"></a>}}  显示的是解析过的结果。 {{ }} 胡子表达式不能解析html 语句

3.属性 。组件有属性。属性可以通过 v-bind:属性名 =""来绑定。简写:属性名=“变量名”

4.胡子表达式中，支持单个表达式。

 

呵呵。

如果没有胡子表达式，应该怎么做呢？

用js方法，根据id或class获取这个元素。将这个元素的内容或属性重新赋值。