VUE从入门教程

目录

  • vue是什么它和jq的区别
  • vue的基本使用
  • vue的常见的周边

一、VUE 是什么它和 JQ 的区别。

vue是什么?

  • vue是一套构建用户界面的js框架,只关注视图层。它是以数据驱动组件化的思想构建的.
  • 数据驱动视图。无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

vue与jq的区别

  1. 从jquery到vue的转变是一个思想想的转变,就是将原有的直接操作dom的思想转变到操作数据上去。
  2. 传统前端开发模式中是以jq为核心的,而vue是现在一个兴起的前端js库,是一个精简的MVVM。
  3. jQuery是使用选择器( ) 选 取 D O M 对 象 , 对 其 进 行 赋 值 、 取 值 、 事 件 绑 定 等 操 作 , 他 和 原 生 的 H T M L 的 区 别 只 在 于 可 以 更 方 便 的 选 取 和 操 作 D O M 对 象 , 而 数 据 和 界 面 是 在 一 起 的 。 比 如 需 要 获 取 l a b e l 标 签 的 内 容 : )选取DOM对象,对其进行赋值、取值、事件绑定等操作,他和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容: DOMHTML便DOMlabel(“lable”).val();,它还是依赖DOM元素的值
  4. jquery适用的场景:jquery侧重样式操作,比如一些H5的动画页面;需要js来操作页面样式的页面.
  5. vue适用的场景:vue侧重数据绑定,比如复杂数据操作的后台页面;表单填写页面

二、vue的基本使用

基本页面结构


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>

  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>

  
  
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  
  <script src="https://unpkg.com/element-ui/lib/index.js">script>
head>

<body>
  
  <div id="app">

    
    <p v-if="true">{{msg}}p>

    
    <input type="text" v-model="inputVal" :data="'1'" />

    
    <button @click="handleBtn">点击button>

    
    <p v-if="true">显示p>
    <p v-else>隐藏p>

    
    <p v-show="false">隐藏p>

    
    <div v-html="'

我会被编译成h1标签

'"
>
div> <div v-text="'

我不会被编译成h1标签

'"
>
div> <p>{{score | handleScore}}p> <el-checkbox-group v-model="checkList"> <el-checkbox label="复选框 A">el-checkbox> <el-checkbox label="复选框 B">el-checkbox> <el-checkbox label="复选框 C">el-checkbox> <el-checkbox label="禁用" disabled>el-checkbox> <el-checkbox label="选中且禁用" disabled>el-checkbox> el-checkbox-group> div> <script> // 2. 创建一个Vue的实例 var vm = new Vue({ el: '#app', // 表示,当前我们 new 的这个 Vue 实例,要控制页面上的哪个区域 data: { //存放数据 msg: 'Hellow World', inputVal: '', score: 57, checkList: ['选中且禁用', '复选框 A'] }, methods: { //方法函数 handleBtn() { console.log(this.msg) } }, watch: { //监听数据变化 }, components: { //计算属性 //与methods类似,一般用于性能优化(方法运行一次后会将返回的结果缓存起来.再次调用时,如果数据没有发生变化会直接返回缓存中的结果) }, filters: { //过滤器 handleScore(val) { let result; if (val < 60) { result = '不及格' } else if (val >= 60 && val < 80) { result = '及格' } else if (val >= 80) { result = '优秀' } return result } }, mounted() { //钩子函数 }, }) script> body> html>

常用的指令

指令 描述
{{ }} 插值表达式
v-text 输出文本,与v-html区别在于不会将html代码翻译
v-html 输出文本
v-bind Vue提供的属性绑定机制,缩写是 ‘:’
v-on Vue提供的事件绑定机制,缩写是:’@’
v-if & v-else 条件渲染
v-show 是否显示该组件
v-for 列表渲染
v-mode 用在表单控件上,实现双向数据绑定

常用的属性和API

  • data

    data是vue实例的数据对象。当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象

  • methods

    methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

  • watch

    一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性

  • filters

    过滤就是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰

  • 生命周期函数

    在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前尚不可用。

    生命周期函数 触发的行为 在此阶段可以做的事情
    beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。 加loading事件
    created vue实例的数据对象data有了,$el还没有 结束loading、请求数据为mounted渲染做准备
    beforeMount vue实例的$el和data都初始化了,但还是虚拟的dom节点,具体的data.filter还未替换。
    mounted vue实例挂载完成,data.filter成功渲染 配合路由钩子使用
    beforeUpdate data更新前触发
    updated data更新时触发 数据更新时,做一些处理(此处也可以用watch进行观测)
    beforeDestroy 组件销前毁时触发
    destroyed 组件销毁时触发,vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在 组件销毁时进行提示

你可能感兴趣的:(经验总结,前端基础,vue,vue.js,javascript)