全乾工程師的自我修養---vue第一部分

時間  2019-11-17
標籤 全乾 工程師 自我 修養 vue 第一 部分 简体版
原文   原文鏈接

全乾工程師的自我修養---vue第一部分

一、環境搭建

主要是搭建nodejs環境，設置淘寶源及安裝cnpm，在以前的文章中有提到過，就再也不贅述。html

接下來全局安裝vue腳手架：vue

cnpm install vue-cli -g
複製代碼

這樣就能夠成功安裝了，安裝完成後，咱們就能夠盡情的食用了。html5

也可使用在線加速cdn:node

<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
複製代碼

二、初始化一個項目

咱們這裏安裝的是vue2.x,因此使用一下命令webpack

vue init webpack 
複製代碼

最好不適用es lint6，因此前面4個都回車，後面填no.web

這樣cd進目錄，使用vue-cli

cnpm run dev
複製代碼

打開localhost:8080就能夠看到咱們的第一個vue hello,world項目了。npm

三、從爬行到飆車

3.1聲明式渲染

Vue 實例生命週期

Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：以下數組

<div id="app">
  {{ message }}
</div>
複製代碼
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
複製代碼

輸出： hello,vuebash

3.2 數據綁定 v-bind

<div :title="title">鼠標綁定事件</div>
複製代碼
data() {
      return {
        msg: "你好vue",
        title: "這是一個title!",
        message: '',
        todos: [{ text: '學習 JavaScript' },{ text: '學習 Vue' }, { text: '整個牛項目' }],
        formData: 'username',
    }
  },
複製代碼

鼠標放在上面時，會顯示： 這是一個title! 這就是v-bind，簡寫方式爲 :

3.3事件綁定 v-on

<div id="app-1">
        <p>{{msg}}</p>
        <button v-on:click="reverseMessage">反轉消息</button>
    </div>
//methods裏面
    reverseMessage(){
      this.msg = this.msg.split('').reverse().join('');
    },
複製代碼

點擊反轉消息按鈕就會顯示： euv好你 ，這就是v-on，簡寫爲@

3.4數據雙向綁定v-model

<div id="app-6">
      <p>message : {{message}}</p>
      <input type="text" v-model="message" name="message" id="message">
    </div>
複製代碼

數據同步更新

3.5v-for

<div>
      <ul>
          <li v-for="item in todos">
            {{item.text}}
          </li>
      </ul>
</div>
複製代碼

顯示todos內容

3.6 v-if

<p v-if="seen">如今你看到我了</p>
複製代碼

這裏，v-if 指令將根據表達式 seen 的值的真假來插入/移除 <p> 元素。

3.7 其餘一些修飾符

v-html
v-on的修飾符
.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。
.capture - 添加事件偵聽器時使用 capture 模式。
.self - 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
.native - 監聽組件根元素的原生事件。
.once - 只觸發一次回調。
.left - (2.2.0) 只當點擊鼠標左鍵時觸發。
.right - (2.2.0) 只當點擊鼠標右鍵時觸發。
.middle - (2.2.0) 只當點擊鼠標中鍵時觸發。
.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器
複製代碼

3.8ref操做dom

<div id="app-5">
      <input type="text"  ref="userInfo">
      <div id="box" ref="box">我是一個box</div>
      <button  @click="getInputValue()">獲取input value</button>

  </div>
  
  
  //methods裏
   // ref操做dom節點
    getInputValue(){
      alert(this.$refs.userInfo.value);
      this.$refs.box.style.background= 'red';
    }
複製代碼

ref指定對象，在方法裏經過this.$refs.對象來獲取對象值。

3.9方法傳值

<div id="app-7">
    <button @click="requestData()">請求數據</button>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
  
  //data
  list: []
  
  //methods
      requestData(){
      for(var i=0;i<10;i++){
        this.list.push(i);
      }
    }
複製代碼

點擊按鈕，就會顯示0-9的列表

3.10小結--todolist

第一步====需求： todolist的增添和刪除

<template>
  <div>
    //表單
    <input type="text" v-model="todolist" placeholder="請輸入todo list" class="inputText">
    <button @click="pushData()" class="btn">+</button>
	//打印to'do'list
    <ul>
      <li v-for="(item,key) in list">
        {{item}}  ----- <button @click="del(key)">刪除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'helloworld',
  data() {
    return {
      todolist: '',
      list: []
    }
  },
  methods: {
      //添加元素操做
    pushData(){
      this.list.push(this.todolist);
      this.todolist = ''
    },
        //刪除元素操做  splice是js數組操做的方法能夠去看一下，這裏的意思表示從key開始刪除第一個，即key表明的值,若是是splice(1,3,'wiinfud')表示從第一個開始刪除3個，並添加一個‘wiidfd'
    del(key){
        this.list.splice(key,1)
    }
  },
}
</script>
//樣式
<style>
  .inputText{
    border-radius: 20px;
    border: solid 1px gray;
    padding: 20px 10px;
    display: inline;
  }
  .btn{
    background: skyblue;
    border: 2px red solid;
    padding: 20px 10px;
    display: inline;
  }
</style>


複製代碼

第二部====需求：能夠點擊來更改狀態

<template>
  <div>
    <input type="text" v-model="todolist" placeholder="請輸入todo list" class="inputText">
    <button @click="pushData()" class="btn">+</button>

  <h2>進行中</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="!item.checked">
        <input type="checkbox" name="" id="" v-model="item.checked">{{item.title}}  ----- <button @click="del(key)">刪除</button>
      </li>
    </ul>
    <br>
    <hr>
    <h2>已完成</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="item.checked">
        <input type="checkbox" name="" id="" v-model="item.checked">{{item.title}}  ----- <button @click="del(key)">刪除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'helloworld',
  data() {
    return {
      todolist: '',
      checked: false,
      list: [
        {
          title: 'vue',
          checked: true
        },
        {
          title: 'nodejs',
          checked: false
        }
      ]
    }
  },
  methods: {
    pushData(){
      this.list.push({
        title: this.todolist,
        checked: this.checked
      });
      this.todolist = ''
    },
    del(key){
        this.list.splice(key,1)
    }
  },
}
</script>

<style>
  .inputText{
    border-radius: 20px;
    border: solid 1px gray;
    padding: 20px 10px;
    display: inline;
  }
  .btn{
    background: skyblue;
    border: 2px red solid;
    padding: 20px 10px;
    display: inline;
  }
</style>


複製代碼

3.11todolist升級

需求：保存狀態，使用enter點擊事件

須要使用到html5的storage技術

<template>
  <div>
    <input type="text" v-model="todolist" placeholder="請輸入todo list" class="inputText">
    <button @click="pushData()" class="btn">+</button>

  <h2>進行中</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="!item.checked">
        <input type="checkbox" name="" id="" v-model="item.checked" @change="saveList()">{{item.title}}  ----- <button @click="del(key)">刪除</button>
      </li>
    </ul>
    <br>
    <hr>
    <h2>已完成</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="item.checked">
        <input type="checkbox" name="" id="" v-model="item.checked" @change="saveList()">{{item.title}}  ----- <button @click="del(key)">刪除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'helloworld',
  data() {
    return {
      todolist: '',
      checked: false,
      list: [
        {
          title: 'vue',
          checked: true
        },
        {
          title: 'nodejs',
          checked: false
        }
      ]
    }
  },
  methods: {
    pushData(){

        this.list.push({
        title: this.todolist,
        checked: this.checked
        });
      this.todolist = ''
      localStorage.setItem('list',JSON.stringify(this.list))
    },
    del(key){
        this.list.splice(key,1);
        localStorage.setItem('list',JSON.stringify(this.list))
    },
    saveList(){
      localStorage.setItem('list',JSON.stringify(this.list))
    }

  },
  mounted() {
    var list = JSON.parse(localStorage.getItem('list'))
    if(list){
      this.list = list;
    }
  },
}
</script>

<style>
  .inputText{
    border-radius: 20px;
    border: solid 1px gray;
    padding: 20px 10px;
    display: inline;
  }
  .btn{
    background: skyblue;
    border: 2px red solid;
    padding: 20px 10px;
    display: inline;
  }
</style>


複製代碼

這裏能夠將storage封裝成一個模塊，暴露出來引用就行。

更多詳情頁

更多詳情請訪問： juntech.top

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程