Vue2快速上手

目标：了解语法，优势，创建简单的页面。

创建第2个vue3项目

序言

1.初识src下各文件的作用

assets：静态资源库：css,图片..

components：组件库

App.vue ：主入口组件，根主件，所有的组件都是通过它进行引入使用的

main.js：主入口文件，所有程序的入口（类似于C语言、java语言的Public main）

registerServiceWorker.js：监听文件，程序做到哪一步了（不操作该文件）

2.组件模块认识

<template>:写html的

<script>：写业务逻辑的

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

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

}
</script>

一、模板语法

文本

数据绑定最常见的形式就是使用{{ }}（Mustache:双大括号）语法的文本插值

文本插值：动态展示文本内容

<span>Message:{{ msg }}</span>

一般配合js中的data()设置数据

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

原始HTML

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

相对于innerText与innerHTML的区别

<p>文本：{{ rawHTML }}</p>
  <p>原始HTML(v-html):<span v-html="rawHTML"></span></p>

export default {
  name: 'HelloWorld',
  data(){
    return{

      rawHTML:"<a href='http://106.54.43.103'>我的博客</a>"
    }
  }
}

属性Attribute

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

绑定的id将变成一个变量可以在data中修改

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

export default {
  name: 'HelloWorld',
  data(){
    return{
      dynamicId:1001
    }
  }
}

温馨提示：v-bind:可以简写成:

使用JavaScript表达式

在我们的模板中，一直都只绑定简单的property键值，Vue.js都提供了完整的Javascript表达式支持

property原型

{{ number+1 }}//简单计算
{{ ok?'YES':'NO' }}//三元表达式
{{ message.split(' ').reverse().join(' ') }}//处理字符

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