vue.js學習筆記（二）--指令的使用

阿新 • • 發佈：2018-11-06

部落格地址：https://fisher-zh.github.io

vue之實現列表的新增點選。
使用指令：v-on v-for v-on v-bind v-model
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js</title>
    <style>
        body {font-family: "\5FAE\8F6F\96C5\9ED1" 
}
        .red {color: red;}
        body > div {
            width: 200px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>vue——列表的新增</h3>
        <input type="text" v-model="newitem" v-on:keyup.enter="clickKey" 
>
        <ul>
            <li v-for="item in items" v-text="item.event" 
            v-bind:class="{red:item.isFinish}" v-on:click="liClick(item)"></li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="testvue.js" 
></script>
</body>
</html>

window.onload = function() {
    Vue.component("todo-item", {
        props: ["todo"],
        template: "<li>{{todo.text}}</li>"
    })
    var app = new Vue({
      el: '#app',
      data: {
        items: [
        ],
        newitem: ''
      },
      methods: {
        liClick: function (item) {
            item.isFinish = !item.isFinish;
        },
        clickKey: function () {
            this.items.push({
                event: this.newitem,
                isFinish: false
            })
            this.newitem = '';
        }
      }
    });
}

vue.js學習筆記（二）--指令的使用

部落格地址：https://fisher-zh.github.io vue之實現列表的新增點選。使用指令：v-on v-for v-on v-bind v-model html <!DOCTYPE html> <html lang="en"&

Vue.js學習筆記（二）

head 改變 vue ntb con UNC 關註 tle element Vue.js不支持IE8及以下的版本，因為vue使用了IE8無法模擬的ECMAScript5的特性，它支持所有兼容ECMAScript5的瀏覽器。 1 <!DOCTYPE html>

vue.js學習筆記（七）--外掛

在日常的專案中，如果我們需要頻繁的使用某些功能，那麼最好的辦法就是將這個功能封裝成函式來使用。在vue中，我們同樣也會經常將常用的元件分離出來，這樣既便於我們的使用，同時也便於之後的維護。同樣，當某個元件在許多專案中都要頻繁的使用，那麼我們可以將其寫成一個外掛，vue官方的文件中也

vue.js學習筆記（六）--利用v-model實現父子元件間的雙向通訊

部落格：https://fisher-zh.github.io/ 在Vue中，我們可以使用prop屬性來進行父子元件間的通訊，在之前的文章Vue踩坑之路–父子元件通訊總結中有介紹過。但是prop 是單向繫結的，我們無法在元件中直接修改prop傳遞的屬性。

vue.js學習筆記（五）--axios中取消請求

部落格：https://fisher-zh.github.io/ 在平時的開發過程中，我們會經常遇到選單切換的問題，在一些切換頻率較低的情況下，在切換到另一個頁面的時候，上一個頁面基本沒有未完成的非同步請求，即時有，在一些情況下也是可以忽略的。但是，在一些切換頻率較高的

vue.js學習筆記（四）--變化檢測問題

部落格地址：https://fisher-zh.github.io Vue追蹤變化是通過把一個普通 JavaScript 物件傳給 Vue 例項的 data 選項，Vue將遍歷此物件所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉為 g

vue.js學習筆記（三）--父子元件通訊總結

部落格地址：https://fisher-zh.github.io 在使用Vue的過程中，如果需要進行父子元件間的通訊，通過查閱官方文件我們可以瞭解到只需要在子元件要顯式地用 props選項宣告它期待獲得的資料，同時在其使用過程中傳入相應的資料即可，例如： Vu

d3.js學習筆記（二）：完整的柱狀圖示例

本示例採用d3的3.x版本庫，示例程式碼如下： d3.fullAxisExample = function() { var width = 240; var height = 240; //在 body 裡新增一個 SVG 畫布

148.Node.js學習筆記（二）2018.11.27

目錄 1. 程式碼規範 1.1程式碼規範問題 1.2 程式碼分號問題 1.3 模板字串 2. http-Apache 2.1 http-Apache功能 2.2 fs 讀取目錄 2.3 http-Apache目錄列表 3. 在node中使用模板引擎 3.1 &

Node.js學習筆記（二）——靜態資原始檔

Node.js學習筆記（二）——靜態資原始檔參考視訊實現一個小阿帕奇，自動為資料夾裡面的檔案、圖片、css、js加上路由。基本思想：使用者輸入什麼url，就用fs去讀取那個檔案。 var http = require('http'); var url

Vue.js 學習筆記（1）Centos環境下部署開發環境

1.安裝JS依賴管理工具npm yum install npm 2. 安裝vue npm install vue 3. 安裝vue命令列工具CLI sudo npm install --global vue-cli 4. 初始化專案 vue init webpack ne

js學習筆記（二）下拉選單項選擇並跳轉

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE>

Vue.js學習筆記（一）--------簡介

1.什麼是Vue? Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以

vue.js學習筆記（一）

最近在通過vue.js的官網學習其框架，我將會把我在學習過程中遇到的錯誤和自己的收貨分享出來，希望與大家共勉。 html程式碼： <!DOCTYPE html> <html lang="en"> <head>

vue.js學習筆記（Vuejs——組件——props數據傳遞）

元素綁定筆記即使大小寫 return span com 簡單 ①組件實例的作用域：是孤立的，簡單的來說，組件和組件之間，即使有同名屬性，值也不共享。 <div id="app"> <add></add>

vue學習筆記（二）——路由配置

out from dex const foo font XP 視圖組件 col 1.配置路由在router/index.js文件中對所有的路由信息進行配置。 // 首先引入vue和vue-router import Vue from ‘vue‘ import VueRo

node.js零基礎學習筆記（二）

註釋：寫完了今天的筆記，今天主要學習了，不同js檔案，如何獲取其他js檔案的方法，一個js方法的匯出另外js檔案對方法的接收（語言敘述可能不準確，就是想說我有一個蘋果你想吃我也願意給你吃，怎麼搞？我要先把蘋果拿出來的過程，和你伸手的過程，我就是一個比喻~可能不太準確，但是我是這麼理解的），以上是第一

Vue：學習筆記（七）-自定義指令

提醒原帖完整收藏於IT老兵驛站，並會不斷更新。前言前面總結到了元件，對混入也進行了研究，不過感覺沒有啥需要總結的，就先總結指令吧，參考這裡，記錄筆記。正文簡介全域性註冊 // 註冊一個全域性自定義指令 `v-focus` Vue.di

JS基礎學習筆記（二）

1.全域性變數不能通過 delete 操作符刪除，而直接在 window 物件上的定義的屬性可以。如下： var age = 29; window.color = "red"; //在 IE < 9 時丟擲錯誤，在其他所有瀏覽器中都返回 false dele

Vue學習之原始碼分析--Vue.js依賴收集（二）

為什麼要依賴收集先看下面這段程式碼 new Vue({ template: `<div> <span>text1:</span> {{text1}}

vue.js學習筆記（二）--指令的使用

相關推薦