第一次接觸神奇的前端框架vue.js-js教程-PHP中文網

首頁

web前端

js教程

第一次接觸神奇的前端框架vue.js

高洛峰

Dec 03, 2016 am 10:11 AM

vue.js

前言

入手2016最火前端框架之一vue.js。大概從網路上找了些資料看了下vue.js，從網路上的資料來看只能驚嘆其發展速度太快，讓我意外的是其作者是華人的前提下作品這麼受歡迎。網路上的部落格和教學各種組合。以至於我都有些感覺out。各種vue+webpack、vue+react、vue+es6+npm等等。琳瑯滿目。真是三天不學習趕不上劉少奇。

開頭主要是初次了解下vue.js，包括v-model、v-if、v-else、v-show、v-for(2.0對$index和$key捨棄，2.0要用index屬性語法為 v -for="(person,index) in persons")、v-on。

看圖

第一次接觸神奇的前端框架vue.js

看程式碼

<!DOCTYPE html>
<html>
 
<head>
 <meta charset="UTF-8">
 <title>Vue.js CURD</title>
 <meta id="viewport" name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
 
<body>
 <div class="row" id="app">
 <div class="col-xs-12 col-md-8">
 <fieldset>
 <legend>New Person</legend>
 <div class="form-group">
 <label>ID</label>
 <input type="text" v-model="newPerson.id"/>
 </div>
 <div class="form-group">
 <label>Name:</label>
 <input type="text" v-model="newPerson.name"/>
 </div>
 <div class="form-group">
 <label>Age:</label>
 <input type="text" v-model="newPerson.age"/>
 </div>
 <div class="form-group">
 <label>Sex:</label>
 <select v-model="newPerson.sex">
 <option value="Male">Male</option>
 <option value="Female">Female</option>
 </select>
 </div>
 <div class="form-group">
 <label></label>
 <button @click="createorupdate">ok</button>
 </div>
 </fieldset>
 </div>
 <div class="col-xs-12 col-md-8">
 <table class="table table-striped">
 <thead>
 <tr>
 <th>Id</th>
 <th>name</th>
 <th>age</th>
 <th>sex</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="(person,index) in persons">
 <td>{{person.id}}</td>
 <td>{{person.name}}</td>
 <td>{{person.age}}</td>
 <td>{{person.sex}}</td>
 <td><button @click="deletePerson(index)">delete</button></td>
 <td><button @click="update(index)">update</button></td>
 </tr>
 </tbody>
 </table>
 </div>
 
 </div>
 <script>
 
 Array.prototype.arrIndex=function(obj){
 for(let i=0;i<this.length;i++){
 var tmp=this[i];
 if(tmp==obj){
 return i;
 }
 }
 }
 
 var vm=new Vue({
 el:&#39;#app&#39;,
 data:{
 editLock:1,
 newPerson:{
 id:0,
 name:&#39;&#39;,
 age:0,
 sex:&#39;male&#39;
 },
 persons:[{
 id:1,
 name: &#39;Jack&#39;,
 age: 30,
 sex: &#39;Male&#39;
 }, {
 id:2,
 name: &#39;Bill&#39;,
 age: 26,
 sex: &#39;Male&#39;
 }, {
 id:3,
 name: &#39;Tracy&#39;,
 age: 22,
 sex: &#39;Female&#39;
 }, {
 id:4,
 name: &#39;Chris&#39;,
 age: 36,
 sex: &#39;Male&#39;
 }]
 },
 methods:{
 create:function(){
 this.persons.push(this.newPerson);
 this.newPerson={id:0,name:&#39;&#39;,age:0,sex:&#39;male&#39;};
 },
 createorupdate:function(){
 if(this.editLock===1){
 this.persons.push(this.newPerson);
 }else{
 //删除老对象
 var aindex=this.persons.arrIndex(this.newPerson);
 console.log(aindex);
 this.persons.splice(aindex,1);
 //插入新对象
 this.persons.push(this.newPerson);
 }
 
 this.newPerson={id:0,name:&#39;&#39;,age:0,sex:&#39;male&#39;};
 },
 deletePerson:function(idx){
 this.persons.splice(idx,1);
 
 },
 update:function(idx){
 var p =this.persons[idx];
 this.editLock=0;
 this.newPerson=p;
 }
 
 }
 })
 </script>
</body>
 
</html>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O，這在很大程度上要歸功於流。流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

See all articles