1. 程式人生 > >vue.js入門(3-4)(methods,屬性繫結)

vue.js入門(3-4)(methods,屬性繫結)

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
	<div id="vue-app">
	<h1>{{ name }}</h1>
	<h1>{{ a() }}</h1>
        <a v-bind:href="web">web開發</a> 
        <input type="text" v-bind:value="name">
        <p v-html="website"></p>
        </div>
	<script src="app.js"></script>
</body>

//app.js

new Vue({
	el:"#vue-app",
	data:{
		name:"001002003",
                web:"https://www.baidu.com/",
                website:"<a href='https://www.baidu.com/'>百度</a>"
         },
	methods:{
		a:function(){
			return "hello world"+this.name;
		}
	}
});

methods:方法(函式)

每個內容如el,data,methods要用逗號分隔開

如果要呼叫自身的data,直接this.屬性即可

1.v-bind

屬性繫結,網址要寫全,v-bind

<input type="text" v-bind:value="name">這句話其實就相當於

<input type="text" value="001002003">

2.v-html

利用v-html新增html元素

<p v-html="a"></p>//寫在html檔案中

a:"<h1>hello</h1>"//寫在data中

相關推薦

vue.js入門3-4methods屬性

//index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <scri

vue元件—父元件向子元件傳值通過屬性

注意: 1.資料繫結時,可能由於某種命名的規範方法或者屬性名字不能是帶有駝峰或者連字元的。並且繫結之後,還要放到子元件的 props資料後,方可呼叫。 2.子元件呼叫的父元件的屬性,只能讀不能寫。同時,子元件的屬性是其私有的,Ajax請求返回data屬性變化也只是子元件

vue學習筆記---- vue指令 v-bind 屬性

**看栗子:** ```html ``` ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201016092756571.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGV

cocoa的特性記憶體管理動態

Cocoa是蘋果的面象物件的框架 他的區別於其他面象物件的兩大特性: 1.動態繫結 在多數面向物件的程式語言中,呼叫方法是由直接呼叫記憶體中一段固定的程式碼實現的。由於這種方法需要預定義的處理命令的類,因而限制了程式的設計,通常採用責任鏈模式作為其設計模式。雖然Co

Vue.js--基於$.ajax獲取資料並與元件的data

Vue.js與jQuery不衝突??? 在實際的應用中,幾乎90%的資料是來源於服務端的,前端和服務端之間的資料互動一般是通過ajax請求來完成的。 說到ajax請求,第一反應肯定想到了jQuery

vue.js中關於下拉框的值預設及問題

一、今天遇到vue中下拉框問題,故而寫點東西留個腳印 <template>   <select v-model='selected' @click="disable()">     <option v-for="(option,index) i

vue.js入門學習搭建環境和測試demo

     什麼是vue.js?這是官網的解釋。     Vue.js(讀音 /vjuː/,類似於 view) 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注檢視層,它不僅易於上手,還便於與第三方庫或

從零開始學Vue—— Vue.js 入門

應該 特性 簡體 經驗 了解 lte 工程目錄 節點 times 概述 vue.js作為現在筆記熱門的JS框架,使用比較簡單易上手,也成為很多公司首選的JS框架。 但是對於初學者可能學起來有些麻煩,所以推出《從零開始學Vue》系列博客,本系列計劃推出19篇博客文章,這是最簡

vue.js入門22事件傳值子向父傳值

上一節講的是父向子傳值首先我們在Header.vue檔案先加入一個方法來改變title值,首先註冊一個事件methods:{     changetitle:function()     {       this.$emit("titlechange","子向父傳值");//

vue.js入門13實戰demo

//index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link

vue,js入門14例項化多個vue物件

//index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link

vue.js實現數據動態響應Vue.set的應用

屬性 點擊 屬性。 沒有 log utf-8 創建 http for 在vue裏面,我們操作最多的就是各種數據,在jquery裏面,我們習慣通過下標定向找到數據,然後重新賦值 比如var a[0]=111;(希望上家公司原諒菜鳥的我寫了不少這樣的代碼??) 下面上代碼

Vue.js系列之項目搭建vue2.0 + vue-cli + webpack

項目搭建 cnblogs 技術 tro gis vue.js 應用 vue-cli web 1、安裝node node.js環境(npm包管理器) cnpm npm的淘寶鏡像 從node.js官網下載並安裝node,安裝過程很簡單,一路“下一步”就可以了(傻瓜式安裝)。

vue.js實戰學習——內置指令

name 初始 節點 刪除 html元素 data post 編譯 16px 註:此內容摘抄自:梁灝的《Vue.js實戰》 註:記得要引入vue.js才能運行哦,文章中貼出的代碼直接復制是不行的,html css js 都放在了一起,而且也沒有引用vue.js。 1.v

Vue.js 源碼全方位深入解析同步更新中

mark parse 實例 如何 高級 -a 解析 驅動 process 第1章 準備工作介紹了 Flow、Vue.js 的源碼目錄設計、Vue.js 的源碼構建方式,以及從入口開始分析了 Vue.js 的初始化過程。 1-1 課程簡介1-2 準備工作1-3 認識 Flow

設置zabbix 3.4.2添加監控項觸發器讓CPU使用超過85%就報警:

oot 圖形 img -a 就會 title code 有一個 nts zabbix (3.4.2)添加監控項,觸發器,讓CPU使用超過85%就報警: zabbix自帶模板有一個 Template OS Linux模板。這個模板有監控CPU的監控項,如果沒有添加一個監控

vue.js 跨域的解決方法轉載

vue專案中,前端與後臺進行資料請求或者提交的時候,如果後臺沒有設定跨域,前端本地除錯程式碼的時候就會報“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 這種跨域錯誤。 要想本地正常的除錯,解決

如何對第一個Vue.js組件進行單元測試

發生 清理 定位元素 after 斷言 www. array 12c 良好的 我們的首次測試 讓我們來寫首個測試。我們首先需要使用shallowMount手動掛載我們的組件,並將其存儲在我們將執行斷言的變量中。我們還可以通過propsData屬性傳遞道具作為對象。

[SLAM]3-4:四元數的定義與計算

結合 高翔老師的著作《視覺SLAM十四講:從理論到實踐》,加上小白的工程經驗共同完成。 1.四元數的定義         旋轉矩陣用九個量描述三自由度的旋轉,具有冗餘性:尤拉角與旋轉向量是緊湊的,但是具有奇異性。事實上,我們找不到不帶奇異

[SLAM]3-4:尤拉角

結合 高翔老師的著作《視覺SLAM十四講:從理論到實踐》,加上小白的工程經驗共同完成。建議購買紙製書籍搭配使用。     1.尤拉角的定義        無論是旋轉向量還是旋轉矩陣,雖然它們能描述旋轉,但對我