展开
拓展 关闭
订阅号推广码
GitHub
视频
公告栏 关闭

vue2.0入门

前言

  • 今天看了vue的官方文档,于是总结了一下vue的基础知识,包括自己的一些理解
  • 官网讲的非常详细,vue官方文档

基础

  • 渐进式JavaScript框架
  • 开发版带有完整警告,生产版体积更小
  • 视图部分写html,脚本部分是vue实例
  • 将脚本中data的属性响应到视图
  • 生命周期钩子写在vue实例内,生命周期函数内不能使用箭头函数
  • 安装:使用script标签引入下载好的js文件,或者使用cdn引入
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="vue.min.js"></script>
  • 需要实例化
  • 带有$的是vue实例所拥有的属性,没有的则是用户自定义的属性
  • 在脚本部分,this指向vue的实例
//在视图部分  {{ }} 用于输出对象属性和函数返回值

//脚本部分
var vm = new Vue({
  // 选项
  el:    //element,对象
  data: {//定义属性	},
  methods: {//定义函数方法},
 
})

//可直接使用该实例对象
vm.site = "goushen"
//$用户区分属性
document.write(vm.$el === document.getElementById('vue_det')) // true

模板

  • v-once 只执行一次性插值,之后不再改变
  • v-html 指令用于输出 html 代码,即绑定html标签;作为body的属性
  • v-bind 指令绑定css代码, 脚本部分中该指令指定的变量为true则使用样式;作为body的属性,语法:v-bind:(当前标签的)属性= "脚本中data的属性"
  • {{ }} 中同样支持js表达式
  • v-if 指令作为body的属性,有vue实例的data属性决定true或false
  • href作为html标签的参数,可绑定url
v-bind:href="url"  //v-bind绑定了href,通过值 url 找到vue实例中data属性中指定的url
v-on:click="doSomething"  //作为html标签的属性,表示点击后找到vue实例data中的doSomething
v-on:submit.prevent="onSubmit"  // . 是特殊方式绑定,点后面表示方法
v-bind:class = "[class名:脚本中data名]"  //绑定class
v-bind:class = "{class名:data属性名}"  //绑定class
v-bind:class = "{class名1:data属性名1, class名2:data属性名2}"  //绑定多个class,也可使用中括号
v-bind:class = "[data属性 ? 'css中class' : '']"  //三目运算

:style = "{class名:data属性名}"  //缩写方式,内联样式绑定

  • v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,作为标签的元素
  • 自定义过滤器,新建实例filters: {}属性
  • 缩写:
<a v-bind:href="url"></a> 省略v-bind缩写成 <a :href="url"></a>
<a v-on:click="doSomething"></a> 将v-on: 替换成@则写成 <a @click="doSomething"></a>

  • 监听属性:watch

条件语句

  • v-if 添加渲染,惰性
  • v-show

列表渲染

v-for = "item in items"  //作为html标签的属性,items表示数组,item表示被迭代的元素别名
:key = "index"  //作为属性,缩写方式,重新排序

事件绑定

v-on:事件 = "函数名(参数)"  //作为标签属性,函数在脚本的method属性中补充

  • 事件修饰符
.stop
.prevent
.capture
.self
.once
.passive

双向绑定

v-model = "data的属性名"  //作为标签的属性,在脚本中将自定义的data的属性名初始化;当选中对应的元素后,选中的值与脚本中设置的属性共享

组件

  • 定义:可复用的vue实例
  • 一个组件的模板必须具备一个根节点,即一个父节点
  • 一个组件可复用,且相互独立
  • 在模板内通过标签声明一个组件的插槽,标签写在脚本组件的template中,之后可在视图部分的组件标签中插入任意html标签
//视图部分,html标签
<div>
<!--通过html标签的方式对组件进行调用,标签的名称就是组件的名称-->
<组件名></组件名>
</div>

//脚本部分
// 创建组件,通过component函数创建,第一个参数是组件名称,
Vue.component('组件名', {
  props:    //为组件定义属性
  data:     //数据
  template: '<h1>自定义组件!</h1>'    //模板
  methods:     //组件的函数
})
// 创建根实例
new Vue({
  el: '#app'
})

组件注册

  • 全局注册,Vue.component的方式注册,可在任何vue实例中使用
  • 组件名称命名规范:my-com-name 或者 MyComName 的方式
  • 局部注册,声明在vue实例中
//视图部分
<!--使用局部组件-->
<test></test>

//脚本部分
new Vue({
   components:{  //局部注册
       test : {  //组件名
           template :     //模板
       }
   } 
});

  • 在模块系统(webpack)中局部注册

单文件组件安装

  • 安装npm,安装node后会自动安装npm,npm -v查看版本
  • 安装cnpm
//由于npm使用时比较慢,使用cnpm
npm install -g cnpm --registry.npm.taotao.org

  • 安装vue-cli
cnpm install -g @vue/cli
vue --version    # 查看cli版本

  • 安装webpack,一个js打包器
cnpm install -g webpack

  • 创建项目:打开cmd,切换到d盘创建项目
//启动vue cli图形管理界面
vue ui

//点击顶部的create / 底部的 create a new project here
//输入项目名称,选择包管理器
//选择默认设置,点击创建项目
//打开创建项目的文件夹

  • 项目目录介绍
    public # 打包部署
    src # 用于开发
    components # 组件目录, .vue后缀的文件是单文件组件
    app.vue # 项目入口
    在app.vue中通过import可引入单文件组件,使用components进行局部注册
    在VSCode中运行项目:点击终端 > 新终端
  npm install 
  npm run serve

  • 自定义组件
# 1.在vue项目的components文件夹下新建文件,以 .vue作为后缀,如test.vue
# 2.由于我是使用vscode打开的vue项目,安装vetur插件后,直接在test.vue中输入vue,会自动提示所需标签

<template>
  <!--模板-->
</template>

<script>
export default {
    <!--脚本-->
}
</script>

<style>
    <!--css样式-->
</style>


# 3.在app.vue中引入、注册、视图部分使用标签的方式 <组件名> 使用该组件

自定义指令

  • 注册一个全局的自定义指令
//视图部分,自定义指令作为标签的属性使用
<input v-名称>

//脚本部分使用 directives 选项来注册
Vue.directive('自定义指令名称', {
  // 编写函数
})

  • 注册一个局部的自定义指令
//同样是在作为标签的属性使用

// 在vue实例中注册 局部
new Vue({
  directives: {
    指令名称: {
      // 编写函数
    }
  }
})

钩子函数(自定义指令 编写函数时可选)

  • bind: 只调用一次,第一次绑定时调用
  • inserted: 被绑定元素插入父节点时调用
  • update: 被绑定元素所在的模板更新时调用
  • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用
  • unbind: 只调用一次, 指令与元素解绑时调用
posted @ 2021-05-07 22:10  DogLeftover  阅读(94)  评论(0编辑  收藏  举报