VUE的基本語法

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

1.VUE的介紹　

| 框架    | 介紹                                                         |
| ------- | ------------------------------------------------------------ |
| vue     | 尤雨溪,漸進式的JavaScript框架                                |
| react   | Facebook公司，裡面的高階函式非常多，對初學者不用好           |
| angular | 谷歌公司，目前更新到6.0，學習angular得需要玩一下typescript        
 Vue     angular2. 
0 3.0~6.0   React(高階函式 es6)初學者不友好 |

2.VUE的基本引入和建立

　　1.下載

cdn方法下載

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

　　2.引包

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

　　3.例項化

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content 
="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
    <!--模板語法渲染頁面-->
  <h2>{{ msg }}</h2>
  <h2>{{ "哈哈哈" }}</h2>
  <h2>{{ 1+1 }}</h2>
  <h2>{{ {'name':'alex'} }}</h2>
  <h2>{{ person.name }}</h2>
  <h2>{{ 1>2? "true":"false" }}</h2>
  <h2>{{ msg2.split('').reverse().join('') }}</h2>
  <div>{{ text }}</div>
</div>
<script src="vue.js"></script>
<script>
    // 
例項化物件
    new Vue({
        el:'#app',
        data:{
            msg:'黃瓜',
            person:{
                name:"alex"
            },
            msg2:"HELLO vue",
            text:'<h2>yuan</h2>>'
        }
    })
</script>

</body>
</html>

View Code

VUE的模板語法可以插入你想插入的任何內容,除了if-else if -else用三元運算子代替

Vue基本語法

text VM 有一個屬性改變 ont 需要我們 var 　　每個 Vue 應用都需要通過實例化 Vue 來實現。　　語法格式如下： var vm = new Vue({ //選項 }); 　　讓我們通過實例來看下 Vue 構造器中需要哪些內容： &l

Vue--基本語法

Vue語法學習引入：script的src中匯入vue包建立：在script中建立vue物件雙向繫結： el----選擇器，鎖定標籤 data----定義變數，將標籤內容繫結給變數 {{變數}}----在標籤中顯示內容 methods----繫結事件，控制變數內容。

Vue 基本語法1

使用 1.例項化（new Vue） new Vue({ el:選擇器 //規定vue的作用範圍 data{ k1:資料1， k2:資料2， } }) 2.插值文字插值： 1》在節點中插值{{key1}} v-once #這個資料是一次性的 2》v-text#插入文字 html插值

VUE的基本語法

UVE官網 1.VUE的介紹　 | 框架 | 介紹 | | ------- | --------------------------------------------------

vue學習-基本語法

vue的語法同angularjs類似，指令由angularjs的ng 變成了vue的v. 1.一個例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

Vue.js（16）之指令的基本語法

自定義指令全域性指令語法：Vue.directive('全域性自定義指令名稱', { /* 自定義指令配置物件 */ }) 私有指令 <template></template> <script> export default {

angular,vue,react的基本語法—動態屬性、事件繫結、ref，angular元件建立方式

基本語法：動態屬性： vue: v-bind:attr="msg" :attr="msg" react: attr={msg} angular [attr]="msg" 事件繫結： vue: v-on:click="handleChange($eve

angular,vue,react的基本語法—雙向資料繫結、條件渲染、列表渲染、angular小案例

基本語法： 1、雙向資料繫結 vue 指令：v-model="msg" react constructor(){ this.state{ msg:"雙向資料繫結" } render(){ <input type="text" value={this.state

[C#] CSharp 基本語法

windows library 命名方式編譯器帕斯卡一、基礎1.規範:除常量外,所有變量用駝峰命名方式,其它用帕斯卡命名方式. 2.編譯:首先由csc.exe將cs文件編譯成MSIL.當雙擊exe的時候,會由clr的jit(just in time)編譯器再次編譯成cpu指令.csc

Swift基礎學習(一)基本語法

postfix 合數語言特性初學者表達式 public 能夠 dict 命名　　Swift 簡介(贊美一番，收集了多篇關於Swift 學習教程的語言簡介一直以為英語和漢語混寫的時候只是英語字母結尾的地方打空格，原來是英語字母的開頭和結尾都要加一個空格，英語字母

C# 基本語法

stack 執行指定 rect pub 標識符 ont check orderby end C# 是一種面向對象的編程語言。在面向對象的程序設計方法中，程序由各種相互交互的對象組成。相同種類的對象通常具有相同的類型，或者說，是在相同的 class 中。例如，以 Recta

SQL語句基本語法

sql首先寫入可顯示中文代碼set character_set_client=gbk; set character_set_results=gbk;或只輸一句 set names gbk;創建數據庫create database 庫名;查詢現有數據局show databases;刪除數據庫drop data

Xml一（基本語法和約束）、

字符一行語言 oca cas 書寫 xsd ati 寫法 XML：eXtensible Markup Language 可擴展標記語言 version="1.0" 　　　　* 可擴展：所有的標簽都是自定義的。　　　　* 功能：數據存儲　　　　* 配置文件　

Markdown 基本語法

最大添加 tle lin hello -s mark lock 橫線 1. 標題設置（讓字體變大，和word的標題意思一樣）在Markdown當中設置標題，有兩種方式：第一種：通過在文字下方添加“=”和“-”，他們分別表示一級標題和二級標題。第二種：在文字開頭加上 “#”

Day1[下] - Python基礎基本語法、流程控制

數字 tin 流程 label reference rst too ren ogr 一、變量\字符編碼 Variables are used to store information to be referenced and manipulated in a comput

python 基本語法速覽，快速入門

我們 method adding ger monk use gre 數據類型 struct https://zhuanlan.zhihu.com/p/24536868 學習參考於這個博文。我做一個筆記。關於python一些常用的語法快速的預覽，適合已經掌握一門編程語

R的基本語法總結

adobe hist 當我 colors gda 編碼找到 cati 逆時針條形圖：基本語法： barplot(H, xlab, ylab, main, names.arg, col) H是包含在挑選圖中使用的數值的向量或矩陣

1.基本語法

lan strong set script rst rip 關於 col doctype 整個教程默認是需要html和css的基礎的，如果後面需要，我會抽時間在寫一份html和css的入門教程；閑話少說，接下來我們一起進入JavaScript這門語言的大門吧！一、Jav

Kotlin VS Java：基本語法差異（轉載）

允許接收 point this view 學習替換同時 ons 5月18號，goole宣布Kotlin成為官方支持的開發語言以來，Kotlin語言社區，公眾號，qq群等全面轟炸，本文是一篇譯文，來自國外的一個用戶，將給大家介紹，基礎語法部分Kotlin和java之間的

1go基本語法

pan 導入 world 函數 ... pac ring 方法 ack // week1 project main.go//導入一個包（目錄） package main //導入方法 import "fmt" //createMessage函數(參數，類型)返回值的類型(

VUE的基本語法

相關推薦