前端笔记（node+vue）

命令行方法

vue基本框架 

<template>
  <!-- 写html的 -->
  <div class="hello">

  </div>
</template>

<script>
// 写业务逻辑的
export default {
  name: 'HelloWorld',
}
</script>>

动态修改文本

数据绑定最常见的形式就是使用 “Mustache” ( 双大括号 ) 语法的文本

插值

<template>
  <!-- 写html的 -->
  <div class="hello">
   <h3>学习Vue：模版语法</h3>
   <p>{{ mssage }}</p>
  </div>
</template>

<script>
// 写业务逻辑的
export default {
  name: 'HelloWorld',
  data() {
    return {
      mssage:"学习vue"
    }
  }
}
</script>

原始html

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

正的 HTML ，你需要使用 v - html 指令

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

 data() {
    return {
      mssage:"学习vue",
      rawHtml:"<a href='https://www.itbaizhan.com'>百战</a>"
    }
  }

属性 Attribute

• 修改html属性，v-bind
• 可以简写成":"

<div v-bind:id="dynamicId"></div>

data(){
    return{
        dynamicId:1001
  }
}

 条件渲染

• v-if   这块内容只会在指令的表达式返回 true 值的时候被渲染。
• v-else  if 不满足时运行
• v-show  和if类似，非常频繁地切换，则使用 v-show 较好

<div class="hello">
    <p v-if="flag">我是孙猴子</p>
    <p v-else>你是傻猴子</p>
    <p v-show="flag">你真的是那只孙猴子么</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      flag:true,
    }
  }