Skip to content

Latest commit

 

History

History
210 lines (151 loc) · 3.99 KB

1.基础.md

File metadata and controls

210 lines (151 loc) · 3.99 KB

Vue 项目

项目中会使用到 前端框架Vue 官方推荐打包工具Vite 有赞Vue移动端组件库 Vant 官方路由库 Vue-Router

构建

安装

  • CND导入

    <script src="https://unpkg.com/vue@next"></script>

  • vue npm

    # 最新稳定版
$ npm install vue@next
# 命令行工具(CLI)
$ npm install -g @vue/cli
# 升级
$ vue upgrade --next

  • vite npm

    $ npm init vite <project-name> -- --template vue
$ cd <project-name>
$ npm install
$ npm run dev

项目配置

插件配置

打包工具

  • webpack
  • vite

Vue基础梳理

创建应用&实例

  • 核心API createApp

    const RootComponent = { /*配置组件*/ }
// 将RootComponent 挂载到 id为app的元素中 
const app = Vue.createApp(RootComponent)
// mount方法返回id为app的元素的实例
const vm = app.mount('#app')

  • 完整示例

    // 创建实例
const app = Vue.createApp({})
// 添加组件设置名称
app.component('SearchInput', SearchInputComponent)
// 添加指令
app.directive('focus', FocusDirective)
// 添加插件
app.use(LocalePlugin)

生命周期

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. deforeUnmount
  6. unmounted
  7. beforeUpdate. 数据变化引起视图更新前
  8. updated 数据变化引起视图更新后

插值

  • 原始HTML v-html

    <p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

  • v-bind

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

  • JavaScript表达式 可以使用表达式 但是不能使用语句

    <!--  正确-->
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

<!-- 错误 -->
{{ var a = 1 }}
{{ if (ok) { return message } }}

指令

v-开头的attribute就是vue指令

指令可以解析JS表达式,响应式的作用域DOM

  • 常用指令

    // seen 如果为真值 则渲染p标签内容  假值则移除
<p v-if="seen">现在你看到我了</p>
// 动态的绑定元素属性
<a v-bind:href="url">链接</a>
// 绑定事件
<button v-on:click="onClick">链接</button>

  • 动态参数

    动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。

    还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写.

    <a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

  • 修饰符

    <form v-on:submit.prevent="onSubmit">...</form>

  • 简写

    <!-- v-bind -->
<a v-bind:href="url"> ... </a>
<a :href="url"> ... </a>
<a :[key]="url"> ... </a>

// v-on
<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a>
<a @[event]="doSomething"> ... </a>

组件基础

实例复用
<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
组件传值
  • 父组件直接通过props给子组件传值
<div id="blog-post-demo" class="demo">
  <blog-post title="My journey with Vue"></blog-post>
  <blog-post title="Blogging with Vue"></blog-post>
  <blog-post title="Why Vue is so fun"></blog-post>
</div>
  • 子组件给父组件发送事件
// 子组件自定义事件
emits: ['sonevent'],
// 子组件响应时间发出事件
$emit('sonevent', toFatherMessage)
// 父组件处理接受发射来的事件
<son @sonevent='onsonevent' color='color:green'></son>