1-3 Vue基本指令

创建Vue实例

• 打开Src目录 ----main.js入口文件

  import Vue from ‘vue’
  import App from ‘./App’

一个组件的引入分为三个部分：
1.引入 2.加载视图 3.创建组件名字
new Vue({
el: ‘#app’, //绑定根视图（index.html）
template: ‘’ //
components: { App },
})

打开第一个根组件App.vue：
组件的应用需要以下三个步骤如图：

模板语法

一个组件里面有三个部分
//模板

//js部分 //css部分

双花括号模板语法视图展示：
注意：
1.双花括号只可以存放变量，字符串必须加双引号
2.双花括号里面的数字相加可直接运算
3.双花括号里面可以做三目运算
4.双花括号只能存在单行语句

Vue基本指令

介绍：
Vue指令是绑定在标签上面的。
指令的名称必须在data里面定义
详细可参照Vue示例：https://cn.vuejs.org/

v-html: 可渲染标签文本
v-text: 只渲染文本
v-bind: 绑定数据 可简写（:）

所有属性都可通过v-bind:进行绑定，可用于动态切换属性class或者style