180728 Vue基础

本文介绍了Vue.js的基础知识,包括MVVM模式、Vue实例创建、数据绑定、指令使用、组件化开发,以及Vue-cli脚手架的安装与配置。同时,文章提到了Vue项目的常见问题,如ESLint配置与解决,数据Mock方法,以及开发工具和资源推荐。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

VUE简介

Vue是一套用于构建用户界面的渐进式框架。
在设计上使用MVVM(Model-View-View-Model)模式。MVVM由MVC衍生。

这里写图片描述

View和ViewModel之间通过双向绑定(data-binding)建立联系。

MVVM的组成:
这里写图片描述
图片来源:前后端分手大师——MVVM 模式

VUE的强大

Vue.js通过MVVM模式拆分为视图与数据两部分,并将其分离。因此,你只需关心数据部分,DOM的事情Vue会帮你搞定。
因此Vue可以应对更复杂的业务场景:SPA,组件解耦等。


Vue的使用

这里写图片描述

1.创建Vue实例

通过构造函数Vue创建一个Vue的根实例。

new Vue({})
  • 挂载点:Vue实例操作的DOM的元素。
  • 模板:挂载点的内容。可以写在元素内,也可以写在template属性下。

2.实例的参数

传入一个参数:是一个大的字面量对象。

  • el:绑定Vue实例与DOM。创建一个实例后,让实例去接管挂载点里面的内容。指定一个页面中已存在的DOM元素来挂载Vue实例。可以是HTMLElement,也可以是CSS选择器。挂载成功后使用app.$el来访问该元素。
  • data:实例的数据项。是一个字面量对象。
  • template:模板内容。
  • methods:事件触发的方法集。
  • computed:计算属性。通过前置值计算得来,如果计算值没有变化,将会使用上一次计算的缓存值。
  • watch:侦听器。侦听某一个数据项的变化,一旦数据变化,就可以执行业务逻辑。
<div id="app">
    <div>{{msg}}</div>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"hello"
        }
        template:'<div>{{msg}}</div>'  // 写出仅为展示方便
    })
</script>

// 3 数据,事件和方法

<div id="root">
    //<h1>hello {{msg}}</h1>
    //<div v-text="content"></div>
    //<div v-html="content"></div>
    <div @click="handleClick">{{content}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{ // data数据项如何显示在模板上
            msg:"world"
            content:"hello"
        }
        method:{
            handleClick:function(){
                this.content="world"
            }
        }
    })
</script>



// 4 属性绑定和双向数据绑定

<div id="root">
    // <div title="title">hello world</div> 此时title的值是字符串"title"
    <div :title=" 'roc' + title">hello world</div> // 此时实现属性绑定,属性值不再是单纯的字符串,而是JS表达式

--------------------------------属性绑定-------------------------------------

    <input v-model="content"/> // 双向绑定
    <div>{{content}}</div>
</div>

<script>
    new Vue({
        el:"#root",  // 通过单项绑定,<div>的内容由数据项content决定
        data:{
            title:"this is hello world",
            content:"this is content"
        }
    })
</script>


// 5 计算属性和侦听器

<div id="root">
    姓:<input v-model="firstName"/>
    名:<input v-model="lastName"/>
    <div>{{firstName}}{{lastName}}</div>
    <div>{{fullName}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            firstName:'',
            lastName:'',
            count:0
        }
        computed:{
            fullName:function(){
                return this.firstName + '' + this.lastName
            }
        },
        watch:{
            fullName:fucntion(){
                this.count ++
            }
        }
    })
</script>


// 6 v-if 、 v-show 、 v-for

<div id="app">
    <div v-if="show">hello world</div>
    <div v-show="show">hello world</div>
    <button @click="handleClick">toggle</button>
    <ul>
        <li v-for="item of list" :key="item">{{item}}</li>
        <li v-for="(item, index) of list" :key="index">{{item}}</li>  // :key用于提升性能,值不能相同,相同时使用这种写法:item为循环内容,index为循环序号
    </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            show:true,
            list:[1,2,3]
        },
        methods:{
            handleClick:function(){
                this.show = !this.show;
            }
        }
    })
</script>

{{}}是插值表达式。
改变数据的显示不用改变DOM,改变数据即可。面向数据编程。
通过引入模板指令,属性值的部分就不再是一个字符串了,而是一个JS表达式。

3.指令

  • [ v-text = 数据项中的属性变量 ] — 模板内容:元素的内容由v-text对应的变量决定,会转义,输出纯文本
  • [ v-html = “value” ] — 模板内容:元素的内容由v-html对应的变量决定,不会转义
  • [ v-on:event=”function” ] — 事件绑定简写:[ @event="fucntion" ]
  • [ v-bind:attr=”value” ] — 属性绑定:attr属性和value数据项绑定 — 简写:[ :attr="value" ]
  • [ v-model = “value”] — 双向绑定:当前DOM元素与数据项会互相影响
  • [ v-if = “value(boolean)” ] — 控制元素存在:创建和去除
  • [ v-show = “value(boolean)” ] — 控制元素显示:display属性
  • [ v-for = “value” ] — 控制一组数据循环

这里写图片描述

4.组件

组件就是自定义一个具有一定逻辑功能的标签,里面携带着相应的结构(template)和功能(methods)。

根实例也是根组件,由众多子组件构成,子组件本身也是一个子实例。

创建一个组件

// 全局组件
Vue.component('组件名称', {组件内容}) 


<todo_item></todo_item>

Vue.component('todo_item',{
    props: ['content','index'],            // 组件接收从外部传入的参数
    template: '<li @click="handleClick">{{content}}</li>',    // 组件的模板
    methods:{                         // 组件的方法集
        handleClick:function(){
            this.$emit('delete',this.index)  // 发布订阅模式
        },
    }
})

// 局部组件
<todo_item></todo_item>

var Todo_Item = {
    template:''
}                  // 声名组件内容包
new Vue({
    el:'#root',
    component:{    // 注册组件,组件名称与组件内容绑定
        'todo_item':Todo_Item
    }
})

组件通信

  • 父级与子级通信通过为子组件添加属性。
  • 子级与父级通信通过发布订阅模式。
<todo-item 
    v-for="(item, index) of list" 
    :key="index" 
    :content="item"   //-------------------
    :index="index"    //-------------------
    @delete="handleDelete"  //-----------------父级订阅
    >
</todo-item>

Vue.component('todo-item', {
    props: ['content','index'],  //--------------------- 组件注册接收从外部传入的参数
    template: '<li @click="handleClick">{{content}}</li>',
    methods:{
        handleClick:function(){
            this.$emit('delete',this.index)  //---------------- 发布订阅模式
        },
    }
})

5 使用Vue创建TodoList应用
这里写图片描述

<body>
    <div id="root">
        <div>
            <input v-model="inputValue">
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item 
                v-for="(item, index) of list" 
                :key="index" :content="item" 
                :index="index" 
                @delete="handleDelete"
            >
            </todo-item>
        </ul>

    </div>
    <script>
        Vue.component('todo-item', {
            props: ['content', 'index'],
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function () {
                    this.$emit('delete', this.index)
                },
            }
        })

        new Vue({
            el: "#root",
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleSubmit: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = ''
                },
                handleDelete: function (index) {
                    this.list.splice(index, 1)
                }
            }
        })
    </script>
</body>

Vue-cli脚手架

Vue CLI

项目框架自动构建

vue init webpack <project_name>  
 cd  <project_name>
npm run dev

通过Vue-cli体验工程化项目流程:

这里写图片描述

// main.js

import Vue from 'vue'
import TodoList from './TodoList.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { TodoList },
  template: '<TodoList/>'
})

// TodoList.vue

<template>
  <div><!-- vue语法要求模板内的标签被一个容器包裹 -->
      <div id="app">
      <input v-model="inputValue"> <!-- 数据项与元素双向绑定-->
      <button @click="handleSubmit">提交</button>
    </div>
    <ul>
      <todo-item
      v-for="(item, index) of list"
      :key="index"
      :content="item"
      :index="index"
      @delete="handleDelete"
      >                 <!--父组件在自己的地盘通过向子组件添加属性进行通信-->
      <!--:content指的就是item不再是简单的字符串,而是一个表达式,一个对应值的变量-->
      </todo-item>
    </ul>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem.vue'
export default {
  components: {
    'todo-item': TodoItem
  },
  data () { // ES6简化函数写法
    return {
      inputValue: '',
      list: []
    }
  }, // 在vue-cli中的组件data不再是一个对象,而是一个函数
  methods: {
    handleSubmit () { // ES6简化函数写法
      this.list.push(this.inputValue)// this指向本实例,相当于this.$data.list
      this.inputValue = ''
    },
    handleDelete (index) { // 参数别忘传
      this.list.splice(index, 1)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


// TodoItem.vue

<template>
  <li class="item" @click="handleDelete">{{content}}</li> <!--父级工作完毕,子级注册完毕,从工具包中寻找可以使用的变量,进而插入元素中-->
</template>

<script>
export default{
  props: ['content', 'index'], // 注册父级传入的参数
  methods: {
    handleDelete () {
      this.$emit('delete', this.index)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> /* 添加作用域,成为局部样式 */
  .item {
    color:green;
  }
</style>


Bug汇总

vue2.0(新手)第一个坑–do not mount Vue to !!!

使用vue-cli脚手架搭建项目,保存编译时出现的代码检查错误(ESLint)

reset.css

html不随放大缩小而变形——initial-scale

Cannot find module ‘stylus’

用vscode,根据vue模板文件生成代码

Vue1.0学习总结(5)———vue-router的使用

Vue Router


  • 第一步 node环境安装
  • 第二步 node环境检测
    node -v
    npm -v
  • 第三步 vue-cli脚手架安装
    • 安装vue-cli
      npm install vue-cli -g
    • 初始化项目
      vue init webpack vue-demo
    • 进入 cd vue-demo
    • 执行 npm install
    • 接下来执行 npm run dev

手把手教你搭建 vue 环境


常用指令

npm run dev 执行脚本
ctrl+c 退出 npm run dev


Vue-cli脚手架搭建 — build / dev-server消失

自Vue-cli升级到2.9.1以后,在build文件夹下的dev-server.js就没有了。

解决方案:Vue2.0史上最全入坑教程(续)—dev-server失踪问题解答


Vue-cli脚手架搭建 — ESlint问题

使用vue-cli脚手架构建了webpack项目,在开发过程中,Eslint验证十分严谨,可以改变设置。
解决方案:使用vue-cli脚手架搭建项目,保存编译时出现的代码检查错误(ESLint)


数据mock

Web应用前后端(台)分离:
后台向前台提供API接口,只负责数据的提供和计算,而完全不处理展现;
前台通过Http(Ajax)请求获取数据, 在浏览器端动态构建界面显示数据。


Google插件

JSONView — 在谷歌浏览器中查看json格式化数据
谷歌浏览器中安装JsonView扩展程序

这里写图片描述


常用网站

SVG在线转换icon字体 — icomoon

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值