Vue初接觸 stage1

阿新 • • 發佈：2019-04-27

troy 打印一個分享圖片 imp 聲明通過搜索無法使用

開始學Vue辣！哈哈哈哈哈真的好好玩啊Vue！這個寫法我真的太愛了！

stage1 4-27

先寫一下安裝Vue devtools時遇到的問題（說來神奇，我是寫第一個實例的時候試著在控制臺打印了這個空的實例發現Vue很貼心的給出了這個）

註意事項：1.引入的Vue必須是開發版本（development）

技術分享圖片

2.安裝完後出現Vue.js not detected問題，

技術分享圖片

打開谷歌瀏覽器擴展程序欄（在“更多工具”中），找到devtools插件，復制這一行id

技術分享圖片

打開everything（一個很好用的整理、清理文件用的軟件，搜索速度非常快），粘貼這一行id，找到這個文件夾（與id同名）

技術分享圖片

打開這個json文件，將這一項改為true

技術分享圖片

仍舊無法使用？打開擴展程序欄，進入詳細信息

技術分享圖片

確認這些選項被勾選~

雙向數據綁定的原生js實現：

技術分享圖片

好啦開始快落！

<!DOCTYPE html>
<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>Document</title>
    <script src="https://vuejs.org/js/vue.js"></script>
</head>
<body>
    <div id="box1">
        <input type="text" v-model="name" placeholder="您的用戶名">
        <h1>你好，{{ name }}</ 
h1>
        <h1 v-html = "link"></h1><!--輸出html內容-->
        <h1 v-pre>{{ 不會被替換的內容 }}</h1>
    </div>
    <div id="currentTime">
        <p>{{ date }}</p>
        <p>{{ date | formateDate }}</p>
        <!-- 過濾器還可以串聯如 | fliter1 | filter2-->
        <!-- 過濾器可以添加參數如 filter(‘arg1‘,‘arg2‘),將被傳遞給第二個和第三個參數 -->
    </div>
    <div id="simpleCalc">
        {{ (num/10) + 9 }}
        {{ isOk ? ‘sure‘ : ‘nope‘ }}
        {{ text.split(‘,‘).reverse().join(‘,‘) }}
    </div>
</body>
<!-- <script src="https://vuejs.org/js/vue.js"></script> -->
<script>
    var initData = {
        a:1
    }
    var app = new Vue({//創建一個vue的根實例，並啟動vue應用
        el:‘#box1‘,//el用於指定一個頁面中已經存在的dom元素掛載這個vue實例，既可以是html元素，也可以是css選擇器（getElementById）
        data:{
            name:‘‘,
            a:initData,//可以顯式聲明數據，也可以指向一個已有的變量，且這二者之間默認建立了雙向綁定
            link:"<a href = ‘#‘>鏈接</a>"
        },
        created:function(){
            console.log(this.a);//不能寫app.a！會報錯
        },
        mounted() {
            console.log(this.$el);
        },
    })
    console.log(app.$el,app.name);//通過這個指針來訪問該元素

    //生命周期，每個vue實例創建時都會經歷一系列初始化過程，同時也會調用相應的生命周期鉤子
    //created：在實例創建完成後使用，已經完成了數據的觀測，但尚未掛載至元素（$el不可用）
    //mounted：el掛載完成後調用，一般第一個業務邏輯從這裏開始
    //beforeDestory：在實例銷毀之前調用，一般用於解綁使用事件監聽器監聽的事件（回收內存？）

    //一個實時顯示當前時間的vue實例

    //進行格式化處理
    var formate = function(value){
        return value < 10 ? ‘0‘ + value : value;
    };

    var showCurrentTime  = new Vue({
        el:"#currentTime",
        data:{
            date:new Date()//顯示當前時間
        },
        filters:{//過濾器的使用
            formateDate:function(value){
                var date = new Date(value),
                    year = date.getFullYear(),
                    month = formate(date.getMonth() + 1),
                    day = formate(date.getDay()),
                    hours = formate(date.getHours()),
                    minutes = formate(date.getMinutes()),
                    seconds = formate(date.getSeconds());
                    return year + "-" + month + "-" + day + ‘ ‘ + hours  + ":" + minutes + ":" + seconds;
            }
        },
        mounted() {
            var _this = this;//聲明一個變量指向vue實例，保證作用域一致，（不是很懂）
            this.timer = setInterval(function(){
                _this.date = new Date();//每隔一秒更新一次date
            },1000)
        },
        beforeDestroy() {
            if(this.timer){//在實例銷毀前清除定時器（釋放內存？）
                clearInterval(this.timer);
            }
        },
    });

    var simpleCalc = new Vue({
       el:"#simpleCalc",
       data:{
           num:500,
           isOk:true,
           text:‘1,2,3,4,5,6‘
       } 
    });
</script>
</html>

要十分註意的：

過濾器、生命周期與鉤子、聲明數據與訪問數據

Vue初接觸 stage1

troy 打印一個分享圖片 imp 聲明通過搜索無法使用開始學Vue辣！哈哈哈哈哈真的好好玩啊Vue！這個寫法我真的太愛了！ stage1 4-27 先寫一下安裝Vue devtools時遇到的問題（說來神奇，我是寫第一個實例的時候試著在控制臺打印了這個空的

Vue.js初接觸

Vue.js框架 Vue是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜

SmartImageView初接觸

android smartimageview 最近一直在學習從遠程服務器獲取圖片，開始時都是手寫這些處理，後來接觸到了smartImageview這個插件。github獲取地址：https://github.com/loopj/android-smart-image-view官方原版插件說明Overv

Vue初體驗

var gui 條件 ges weight ica itl type col 參考地址：https://cn.vuejs.org/v2/guide/installation.html Vue.js 是一套構建用戶界面的漸進式框架，不支持IE8及其以下版本的瀏覽器，因為其使用

Vue初體驗——用Vue實現簡易版TodoList

一個 link this clas 教程 show success gen strong 最近在學習Vue，斷斷續續看完了官方教程的基礎部分，想練一下手熟悉一下基本用法，做了一個簡易版的TodoList 效果：代碼： HTML： 1 <!DOC

面向對象初接觸（下）

tom pytho cor 控制 elf 類型 () int on() 當一個類中的屬性條件不滿足我們的需求時，考慮到為了不破壞封裝，從而對其屬性進行增加的實現，就有了以下幾種方法猴子補丁 from test01 import Person from test001

Orleans 初接觸（一）入門例子

方法 ket sys pre 直接 .cn rain ros sqlserve 【返回導航】　　在簡單了解了Orleans 之後我們可以通過幾個例子去加深印象一、Orleans入門例子　　這個例子是跟著《Orleans入門例子》（https://www.cnblog

electron-vue 初體驗

大小 mar ctr ++ -c http 軟件包體驗 com 註意事項首先確保node和npm是最新版本避免使用鏡像（我淘寶鏡像安裝有報錯現象）避免window的一些坑若上一項檢查完成，我們可以繼續設置所需的構建工具。使用 windows-build-t

css初接觸

簡潔定義標簽 auto html元素 light 分類 ref 負數 css：層疊式表，用來美化頁面，定義如何顯示html元素，讓html代碼顯示更加簡潔明了。 css分類：1.內聯：寫在標簽裏面，以屬性的形式，屬性名為style，優先級別最高。（不推薦使用，原因代碼看

vue初嘗試--組件

item uic 同步詳細 all add one fault 嘗試 github代碼同步網址組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添

Go初接觸之imagick

get 對象 top ola error AI AR rap des 　　imagemagick是一個著名的圖片處理庫，github上有人將其封裝成了golang能用的庫，所以依舊是寫一個縮略圖的程序。今天看項目源碼看的我頭都大了。 1 package main 2

Linux命令初接觸

文件包括創建同文件命令查看命令一個 pwd r文件 LS：　　列出當前文件夾內容　　-a 列出所有內容，包括隱藏的　　-l 以列表形式列出所有內容 PWD：　　顯示當前路徑 CD：　　改變路徑命令 MKDIR：　　創建一個或者多個文件夾or文件

SpringBoot初接觸

tel 映射 style 頁面 exp hello lba ron 發現使用SpringBoot寫HelloWorld，當配置好啟動類後，再創建新的controller或其它類，啟動項目後訪問對應的映射名，頁面顯示： Whitelabel Error Page This

Linux命令初接觸（二）

less 不同後綴 .gz shell編程查看顯示末尾 bsp FILE：　　查看文件的類型 DIFF：　　比較兩個文件內容的不同　　diff 文件1 文件2 FIND: 　　查找文件　　find 路徑 -name “文件名” GREP：　　根據

學海無涯——機器人流程自動化初接觸(RPA,Robotic process automation)

公司舉辦了一個關於RPA的講座，或許是用英語講的原因，聽得稀裡糊塗的。還是自己補補課吧。 --------------------------------------------------------------------------------------------------

React初接觸--小Demo

<body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world

【Vue初體驗】UI工具+axios與後臺相連

幫學姐寫系統中的一個功能元件，第一次接觸了Vue，感覺很好上手，而且可使用的工具也很多，好記性不如爛筆頭，小小記錄一下～ UI組建庫：Element，個人很喜歡了，好看又好用。 https://element.faas.ele.me/#/zh-CN axios：一個基於 promise 的 H

Vue初體驗（五）過濾器的使用

Vue.js 允許你自定義過濾器，被用作一些常見的文字格式化。使用格式為： {{ me

.NET Core Mvc和MySql初接觸（三）log4Net全域性異常日誌

首先到NuGet上安裝log4net 安裝完成後增加一個log4net配置檔案，命名隨意，需要到startup.cs初始化 <?xml version="1.0" encoding="utf-8

jmeter初級學習一效能測試初接觸------《JMeter實戰》

技術要求測試工具：JMeter、LoadRunner 測試基礎：效能測試理論、自動化測試理論、測試開發伺服器效能診斷：CPU、磁碟、記憶體、網路優化技能：程式碼、架構、中介軟體、作業系統、資料庫（SQL、配置、設計）協議：http/https、We

Vue初接觸 stage1

相關推薦