current position:Home>Have you learned how to use Vue?

Have you learned how to use Vue?

2022-04-29 13:34:20Dada front end

In the use of Vue When , Recommended installation Vue Devtools

Browser devtools extension for debugging Vue.js applications.

Directly introducing <script>, The development version includes complete warning and debugging modes , Production version removed warning ,33.30KB min+gzip


<script src=""></script>

Production environment

<script src="[email protected]/dist/vue.js"></script>

Use native ES Modules

<script type="module">
  import Vue from '[email protected]/dist/vue.esm.browser.js'

obtain Vue[email protected]/dist/vue.js

The version used in the production environment

vue.js Switch to vue.min.js


#  Latest stable version 
$ npm install vue

CLI Tools

Development version :

git clone node_modules/vue
cd node_modules/vue
npm install
npm run build
#  The latest stable version 
$ bower install vue

Vue A progressive framework for building user interfaces

Layer by layer from bottom up

The core library only focuses on view layers

<!--  Development environment version , Contains helpful command-line warnings  -->
<script src=""></script>
<!--  Production version , Size and speed are optimized  -->
<script src=""></script>

vue-cli install


<div id="app">
  {{ message }}

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'

Binding element properties

<div id="app-2">
  <span v-bind:title="message">
     Hover for a few seconds to see the prompt information of dynamic binding here !

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: ' Page load on  ' + new Date().toLocaleString()


Conditions and cycles

<div id="app-3">
  <p v-if="seen"> Now you see me </p>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
<div id="app-4">
    <li v-for="todo in todos">
      {{ todo.text }}

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: ' Study  JavaScript' },
      { text: ' Study  Vue' },
      { text: ' The whole cow project ' }
app4.todos.push({ text: ' The new project ' })

v-on Instruction to add an event listener

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage"> Reverse message </button>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')

v-model Instructions

Realize the two-way binding between form input and application state

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'

Componentized application building

A component tree :

Vue It's easy to register components in :

//  Definition is named  todo-item  The new component 
Vue.component('todo-item', {
  template: '<li> This is a to-do item </li>'
  <!--  Create a  todo-item  Instances of components  -->

Transfer data from the parent scope to the child component

Vue.component('todo-item', {
  // todo-item  The component now accepts a 
  // "prop", Similar to a custom feature .
  //  This  prop  be known as  todo.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
<div id="app-7">
       Now we're doing it for everyone  todo-item  Provide  todo  object 
      todo  Objects are variables , That is, its content can be dynamic .
       We also need to provide one for each component “key”, Later again 
       Explain in detail .
      v-for="item in groceryList"

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: ' vegetables ' },
      { id: 1, text: ' cheese ' },
      { id: 2, text: ' Whatever other people eat ' }

Subunit pass prop The interface is well decoupled from the parent unit

Create examples

var vm = new Vue({
  //  Options 

vm (ViewModel Abbreviation ) Express Vue example

//  Our data objects 
var data = { a: 1 }

//  The object is added to a  Vue  In the example 
var vm = new Vue({
  data: data

//  Get the properties on this instance 
//  Returns the corresponding field in the source data 
vm.a == data.a // => true

//  Setting properties also affects raw data 
vm.a = 2
data.a // => 2

// …… vice versa 
data.a = 3
vm.a // => 3

Object.freeze() The response system can no longer track changes

var obj = {
  foo: 'bar'


new Vue({
  el: '#app',
  data: obj
<div id="app">
  <p>{{ foo }}</p>
  <!--  there  `foo`  Will not update !-->
  <button v-on:click="foo = 'baz'">Change it</button>
var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch  Is an example method 
vm.$watch('a', function (newValue, oldValue) {
  //  This callback will be in  `vm.a`  After changing, call 

Life cycle

Data monitoring 、 Compiling templates 、 Mount the instance to DOM And update when the data changes DOM

new Vue({
  data: {
    a: 1
  created: function () {
    // `this`  Point to  vm  example 
    console.log('a is: ' + this.a)
// => "a is: 1"

The life cycle of the instance

Remove the floating

Add empty div, Use clear: both

The parent element uses overflow: hidden

The parent element uses overflow: auto

The parent defines the height

Parent div Define pseudo class :after and zoom

#test {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  <!--  Three lines of code are indispensable  -->
  margin: 0 auto;
  left: 0;
  right: 0;

<div id="test"></div>

utilize CSS Draw a triangle

#triangle {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid greenyellow;

<div id="triangle"><div>

display:none; Do not display the corresponding element

visibility:hidden; Hide the corresponding element

position:absolute/fixed; The highest priority , With them ,float It doesn't work

The way to clear the float :

Parent div Definition height

Empty the last floating element div label And add a style clear:both

Parent div Definition zoom

Add styles to parent tags that contain floating elements overflow by hidden or auto

: Represents a pseudo class ,:: Denotes a pseudo element 

this It is a variable that cannot be changed during the execution process determined when the execution context is created

MVVM It is divided into Model、View、ViewModel The three

Model Representative data model View representative UI View ViewModel Responsible for monitoring Model Change of data and control of view update

 Parent child component communication : Father -> Son : Use props, Son -> Father :$emit Method pass parameter 
.prevent:  Submit event no longer reloads page ;
.stop:  Prevent click events from bubbling ;
.self:  Triggered when an event occurs on the element itself rather than a child element ;
.capture:  Event listening , When the event occurs, it will call ;
$route  yes “ Routing information object ”
$router  yes “ Routing instance ” Object includes the jump method of route , Hook function, etc 

Promise Characteristics Once the state changes, it will never change again

How to create Promise example ?

const promise = new Promise(function(resolve, reject) {
  if (/*  Asynchronous operation succeeded  */){
  } else {
let promise = Promise.resolve($.ajax('/test/test.json'));// => promise object 

The essence of an applet is a single page application Functions can be divided into render layers webview And the logic layer appService Two parts

Deep copy and shallow copy are for complex data types , Shallow copy only copies one layer , And deep copy is layer upon layer .

copyright notice
author[Dada front end],Please bring the original link to reprint, thank you.

Random recommended