开始使用vue.js
生活随笔
收集整理的這篇文章主要介紹了
开始使用vue.js
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
開始使用vue.js
安裝vue.js
可以在 Vue.js 的官網(wǎng)上直接下載 vue.min.js 并用
vue.js主要是代替Django中Template的功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> Vue 測試實例 - 菜鳥教程(runoob.com" target="_blank" class="textToLink">runoob.com) <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"><p>{{ article.title }}</p> </div><script> new Vue({el: '#app',data: {article:{title:"This is a title!",content:"Hi there!"}} }) </script> </body> </html>vue.js起步
每個 Vue 應(yīng)用都需要通過實例化 Vue 來實現(xiàn)。
語法格式如下：
可以看到在 Vue 構(gòu)造器中有一個el 參數(shù)，它是 DOM 元素中的 id。在上面實例中 id 為 vue_det，在 div 元素中：
<div id = "vue_det"></div>這意味著我們接下來的改動全部在以上指定的 div 內(nèi)，div 外部不受影響。
接下來我們看看如何定義數(shù)據(jù)對象。
data用于定義屬性，實例中有三個屬性分別為：site、url、alexa。
methods 用于定義的函數(shù)，可以通過 return 來返回函數(shù)值。
{{ }} 用于輸出對象屬性和函數(shù)返回值。
<!DOCTYPE html> <html> <head><meta charset="utf-8">Vue 測試實例 - 菜鳥教程(runoob.com" target="_blank" class="textToLink">runoob.com)<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> </head> <body><div id="vue_det"><h1>site : {{site}}</h1><h1>url : {{url}}</h1><h1>{{details()}}</h1></div><script type="text/javascript">var vm = new Vue({el: '#vue_det',data: {site: "菜鳥教程",url: "www.runoob.com",alexa: "10000"},methods: {details: function() {return this.site + " - 學(xué)的不僅是技術(shù)，更是夢想！";}}})</script> </body> </html>Vue.js模板語法
插值
1.文本
2.html
3.屬性
4.表達(dá)式
指令
6.參數(shù)
修飾符
用戶輸入
實例
實現(xiàn)你還可以輸入多少字功能
<h3 class="ui header"> 你還可以輸入 {{ 200 - message.length }} 字 </h3> <form class="ui form" action="index.html" method="post"><input v-model="message" type="text"> </form>實現(xiàn)按鈕改變字體大小功能
<div class="ui segment padded container" ><!-- <button v-on:click="article.fontSize += 1"></button> --><button v-on:click="article.fontSize++"> + </button><h1 class="ui header">{{ article.title }}{{ article.fontSize }}</h1><p>{{ article.content }}</p> </div>實現(xiàn)刪除評論功能
這樣只需點擊spam,便會出現(xiàn)評論已被刪除的提示
總結(jié)
以上是生活随笔為你收集整理的开始使用vue.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ubuntu安装node.js
- 下一篇： html5倒计时秒杀怎么做,vue 设