【vue系列课程2】—— 项目总概、模版语法、vue基本指令

初级认识并简单修改Vue

---

项目总概

main.js 加载Vue实例、引入App.vue组件，构成项目 

• 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：官方文档

var vm = new Vue({
  // 选项
})

main.js中(入口文件)

import Vue from 'vue'
import App from './App' //为App.vue 省略后缀
import router from './router'

Vue.config.productionTip = false //开发时的配置

/* eslint-disable no-new */
new Vue({
  el: '#app', //绑定一个 id叫app的根视图 
  router,
  components: { App }, //注入组件
  template: '<App/>'  //指定一个根组件（加载视图）
})

注：vue 为MVVM模型

一个组件的使用需要三个步骤：

1. 引入import App from './App'
2. 加载视图template: '<App/>'
3. 创建组件的名字 components: { App }

---

模版语法（修改项目）

1.Vue组件

Vue组件：
    template：视图
    script：逻辑
    style：样式

<template></template>

<script>
export default {
  name: 'homepage',
  data () {
    return {}
  }
}
</script>

<style scoped>
</style>

---

2.Mustache模版语法

Mustache模版语法
    表现形式：{{ 语法 }}

<template>
    <div>
        {{ hello }}
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hello:"Hello~"
    }
  }
}
</script>

模版语法的规则与使用

<template>
    <div>
        {{ hello }}          <!-- Hello~ -->
        {{ 1+1 }}            <!-- 2 -->
        {{ 哈哈哈 }}          <!-- 哈哈 -->
        {{ "哈哈哈哈" }}      <!-- 哈哈哈哈 -->
        {{ 0>10 ? '对的' : '错的' }}   <!-- 错的 -->
        {{ message.split(''),reverse().join('') }}  <!-- 切割、翻转、拼接, olleh -->

<!--只能存在单行语句(表达式为一行)、不能if/else、不能let a=10(let a; a=10)、并且不能作用在html属性上-->

    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hello:"Hello~",
      "哈哈哈":"哈哈",
      message:'hello'
    }
  }
}
</script>

---

3.Vue基本指令

v-x指令为vue的内置指令

v-html:渲染文本

v-text:渲染文本

<template>
    <div>
        <p v-html="hello"></p> <!-- Hello~ -->
        <p v-text="hello"></p> <!-- <span>Hello~</span> -->
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hello:"<span>Hello~</span>"
    }
  }
}

v-bind:绑定

绑定属性

<template>
    <div>
        <span v-bind:class="ha">哈哈</span>
        <span v-bind:title="ts">提示</span>
        <button v-bind:disabled="isButtonDisabled">Button</button>
        <div v-bind:id="dynamicId"></div>
        <div v-bind:id="'list-' + id"></div>
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      ha:"haha",
      ts:"哈哈",
      isButtonDisabled:true,
      dynamicId:45,
      id:55
    }
  }
}
</script>

---

注：项目参考课程编写