當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue基础语法01

發布時間：2023/12/14 vue 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue基础语法01 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、模板語法
1.插值
文本
?{{msg}}
?示例：

錯誤示范：

html

?使用v-html指令用于輸出html代碼

示例：

<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<title></title>
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
?? ?</head>
?? ?<style>
?? ??? ?.cl{
?? ??? ??? ?color: pink;
?? ??? ?}
?? ?</style>
?? ?<body>
?? ??? ?<div id="zhq">
?? ??? ??? ?<h1>{{title}}</h1>
?? ??? ??? ?<h2>插值</h2>
?? ??? ??? ?<ol>
?? ??? ??? ??? ?<li>文本</li>
?? ??? ??? ??? ?<span>
?? ??? ??? ??? ??? ?{{msg}}
?? ??? ??? ??? ?</span>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<li>html</li>
?? ??? ??? ??? ?<span v-html="html"></span>
?? ??? ??? ?</ol>
?? ??? ?</div>
?? ?</body>
?? ?<script>
?? ??? ?// 每個Vue應用都是通過用Vue構造器創建一個新的Vue實例開始的
?? ??? ?var vm=new Vue({
?? ??? ??? ?el:'#zhq', ? ? ? ? ? ??
?? ??? ??? ?data:function(){
?? ??? ??? ??? ?return{
?? ??? ??? ??? ??? ?msg:'Hello vue',
?? ??? ??? ??? ??? ?ts:new Date().getTime(),
?? ??? ??? ??? ??? ?html:'<input type="text" value="2"/>',
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?methods:{
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ?})
?? ?</script>
</html>

屬性

HTML屬性中的值應使用v-bind指令?

示例：

<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<title></title>
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
?? ?</head>
?? ?<style>
?? ??? ?.cl{
?? ??? ??? ?color: pink;
?? ??? ?}
?? ?</style>
?? ?<body>
?? ??? ?<div id="zhq">
?? ??? ??? ?<h1>{{title}}</h1>
?? ??? ??? ?<h2>插值</h2>
?? ??? ??? ?<ol>
?? ??? ??? ??? ?<li>文本</li>
?? ??? ??? ??? ?<span>
?? ??? ??? ??? ??? ?{{msg}}
?? ??? ??? ??? ?</span>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<li>html</li>
?? ??? ??? ??? ?<span v-html="html"></span>
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ??? ?<li>v-bind綁值</li>
?? ??? ??? ??? ?<span v-bind:class="cls" v-bind:id="123">
?? ??? ??? ??? ??? ?我變色了
?? ??? ??? ??? ?</span>
?? ??? ??? ?</ol>
?? ??? ?</div>
?? ?</body>
?? ?<script>
?? ??? ?// 每個Vue應用都是通過用Vue構造器創建一個新的Vue實例開始的
?? ??? ?var vm=new Vue({
?? ??? ??? ?el:'#zhq', ? ? ? ? ? ??
?? ??? ??? ?data:function(){
?? ??? ??? ??? ?return{
?? ??? ??? ??? ??? ?msg:'Hello vue',
?? ??? ??? ??? ??? ?ts:new Date().getTime(),
?? ??? ??? ??? ??? ?html:'<input type="text" value="2"/>',
?? ??? ??? ??? ??? ?cls:'cl',
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?methods:{
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ?})
?? ?</script>
</html>

我們在外面給cl定義了一個樣式，然后用v-bind給span標簽綁定class,span中的內容也變色了。

又用v-bind給它綁了一個id為123，在前端控制臺也能很清楚的看到

表達式

Vue提供了完全的JavaScript表達式支持
示例：

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<title></title>
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
?? ?</head>
?? ?<style>
?? ??? ?.cl{
?? ??? ??? ?color: pink;
?? ??? ?}
?? ?</style>
?? ?<body>
?? ??? ?<div id="zhq">
?? ??? ??? ?<h1>{{ts}}</h1>
?? ??? ??? ?<h2>插值</h2>
?? ??? ??? ?<ol>
?? ??? ??? ??? ?<li>文本</li>
?? ??? ??? ??? ?<span>
?? ??? ??? ??? ??? ?{{msg}}
?? ??? ??? ??? ?</span>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<li>html</li>
?? ??? ??? ??? ?<span v-html="html"></span>
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ??? ?<li>v-bind綁值</li>
?? ??? ??? ??? ?<span v-bind:class="cls" v-bind:id="123">
?? ??? ??? ??? ??? ?我變色了
?? ??? ??? ??? ?</span>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<li>表達式</li>
?? ??? ??? ??? ?<span>
?? ??? ??? ??? ??? ?{{msg.substr(0,6).toUpperCase()}}<br />
?? ??? ??? ??? ??? ?{{ number + 1 }}<br />
?? ??? ??? ??? ??? ?{{ ok ? 'YES' : 'NO' }}
?? ??? ??? ??? ??? ?<li v-bind:id="'list-' + id">我的Id是js動態生成的</li>
?? ??? ??? ??? ?</span>
?? ??? ??? ??? ?
?? ??? ??? ?</ol>
?? ??? ?</div>
?? ?</body>
?? ?<script>
?? ??? ?// 每個Vue應用都是通過用Vue構造器創建一個新的Vue實例開始的
?? ??? ?var vm=new Vue({
?? ??? ??? ?el:'#zhq', ? ? ? ? ? ??
?? ??? ??? ?data:function(){
?? ??? ??? ??? ?return{
?? ??? ??? ??? ??? ?msg:'Hello vue',
?? ??? ??? ??? ??? ?ts:new Date().getTime(),
?? ??? ??? ??? ??? ?html:'<input type="text" value="2"/>',
?? ??? ??? ??? ??? ?cls:'cl',
?? ??? ??? ??? ??? ?number:1,
?? ??? ??? ??? ??? ?ok:true,
?? ??? ??? ??? ??? ?id:22,
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?
?? ??? ??? ?methods:{
?
?? ??? ??? ?}
?? ??? ?})
?? ?</script>
</html>

?同樣也可以支持JavaScript表達式

第一個：截取（0，6）然后大寫

第二個：加法運算

第三個：三元運算符

指令

指的是帶有“v-”前綴的特殊屬性
核心指令
v-if/v-else/v-else-if

代碼：

<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<title></title>
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
?? ?</head>
?? ?<body>
?? ??? ?<div id="zhq">
?? ??? ??? ?<h1>{{title}}</h1>
?? ??? ??? ?<h2>指令</h2>
?? ??? ??? ?<ol>
?? ??? ??? ??? ?<li>v-if / v-else / v-else-if</li>
?? ??? ??? ??? ?<span v-if="sex=='boy'">
?? ??? ??? ??? ??? ?男的
?? ??? ??? ??? ?</span>
?? ??? ??? ??? ?<span v-else-if="sex=='girl'">
?? ??? ??? ??? ??? ?女的
?? ??? ??? ??? ?</span>
?? ??? ??? ??? ?<span v-else>
?? ??? ??? ??? ??? ?男的還是女的？
?? ??? ??? ??? ?</span>
? ? ? ? ? ? </ol>
?? ??? ?</div>
?? ?</body>
?? ?<script>
?? ??? ?// 每個Vue應用都是通過用Vue構造器創建一個新的Vue實例開始的
?? ??? ?var vm=new Vue({
?? ??? ??? ?el:'#zhq', ? ? ? ? ? ??
?? ??? ??? ?data:function(){
?? ??? ??? ??? ?return{
?? ??? ??? ??? ??? ?ts:new Date().getTime(),
?? ??? ??? ??? ??? ?sex:'gay',
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?methods:{
?? ??? ??? ?}
?? ??? ?})
?? ?</script>
</html>

根據其后表達式的bool值進行判斷是否渲染該元素

他們只能是兄弟元素
v-else-if上一個兄弟元素必須是v-if
v-else上一個兄弟元素必須是v-if或者是v-else-if

v-show

代碼：

<li>v-show和v-model</li>
<div>
?? ?<input type="checkbox" v-model="flag" />已閱讀該協議
?? ?<div v-show="flag">
?? ??? ??? ?嗨害,我出來了
?? ?</div>
</div>
?

flag:false,
?

?與v-if類似，只是會渲染其身后表達式為false的元素，而且會給這樣的元素添加css代碼：style="display:none"

v-for

代碼：

?? ??? ?<div id="zhq">
?? ??? ??? ?<h1>{{title}}</h1>
?? ??? ??? ?<h2>指令</h2>
?? ??? ??? ?<ol>
?? ??? ??? ??? ?<li>v-if / v-else / v-else-if</li>
?? ??? ??? ??? ?<span v-if="sex=='boy'">
?? ??? ??? ??? ??? ?我是男的
?? ??? ??? ??? ?</span>
?? ??? ??? ??? ?<span v-else-if="sex=='girl'">
?? ??? ??? ??? ??? ?我是女的
?? ??? ??? ??? ?</span>
?? ??? ??? ??? ?<span v-else>
?? ??? ??? ??? ??? ?我是男的還是女的
?? ??? ??? ??? ?</span>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<li>v-show和v-model</li>
?? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ?<input type="checkbox" v-model="flag" />已閱讀該協議
?? ??? ??? ??? ??? ?<div v-show="flag">
?? ??? ??? ??? ??? ??? ?嗨害,我出來了
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<li>v-for/v-model/v-bind/{{}}</li>
?? ??? ??? ??? ?<div v-for="(d,i) in arrays">
?? ??? ??? ??? ??? ?i={{i}},d={ozvdkddzhkzd}
?? ??? ??? ??? ?</div>
?? ??? ?
?? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ?<select>
?? ??? ??? ??? ??? ??? ?<option value="">--請選擇--</option>
?? ??? ??? ??? ??? ??? ?<option v-for="d in depts" v-bind:value="d.id">
?? ??? ??? ??? ??? ??? ??? ?{{d.name}}
?? ??? ??? ??? ??? ??? ?</option>
?? ??? ??? ??? ??? ?</select>
?? ??? ??? ??? ?</div>
?
?? ??? ??? ??? ?<span v-for="a in depts">
?? ??? ??? ??? ??? ?<input type="checkbox" v-bind:value="a.id" v-model="dt"/>{{a.name}}
?? ??? ??? ??? ?</span><br />
?? ??? ??? ??? ?<span v-if="dt.length!=0">
?? ??? ??? ??? ??? ?{{dt}}
?? ??? ??? ??? ?</span>
?? ??? ??? ?</ol>
?? ??? ?</div>
?
?
?? ??? ??? ?data:function(){
?? ??? ??? ??? ?return{
?? ??? ??? ??? ??? ?ts:new Date().getTime(),
?? ??? ??? ??? ??? ?sex:'gay',
?? ??? ??? ??? ??? ?flag:false,
?? ??? ??? ??? ??? ?depts:[
?? ??? ??? ??? ??? ??? ?{id:1,name:'研發部'},
?? ??? ??? ??? ??? ??? ?{id:2,name:'調研部'},
?? ??? ??? ??? ??? ??? ?{id:3,name:'人事部'},
?? ??? ??? ??? ??? ??? ?{id:4,name:'客服部'}
?? ??? ??? ??? ??? ?],
?? ??? ??? ??? ??? ?dt:[],
?? ??? ??? ??? ??? ?arrays:[1,2,3,4,5],
?? ??? ??? ??? ?}
?? ??? ??? ?},
?

類似JS的遍歷
? ? ? ? ? ? ? ? ?遍歷數組: v-for="item in items", items是數組，item為數組中的數組元素
? ? ? ? ? ? ? ? ?遍歷對象: v-for="(value,key,index) in stu", value屬性值,key屬性名，index下標
?

v-model

在Vue入門篇有講解

用來在 input、select、textarea、checkbox、radio 等表單控件元素上創建雙向數據綁定，根據表單上的值，自動更新綁定的元素的值 ??

參數、動態參數、簡寫
代碼：

? ? ? ? ? ? <li>參數、動態參數、簡寫</li>
?? ??? ??? ??? ?<span>
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?<a v-bind:[attrname]="url">百度</a><br />
?? ??? ??? ??? ??? ?<a v-on:[eventname]="doClick">點我</a><br />
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?<a :href="url">百度</a><br />
?? ??? ??? ??? ??? ?<a @click="doClick">點我</a>
?? ??? ??? ??? ?</span>
?
? ? ? ? var vm=new Vue({
?? ??? ??? ?el:'#zhq', ? ? ? ? ? ??
?? ??? ??? ?data:function(){
?? ??? ??? ??? ?return{
?? ??? ??? ??? ??? ?ts:new Date().getTime(),
?? ??? ??? ??? ??? ?sex:'gay',
?? ??? ??? ??? ??? ?flag:false,
?? ??? ??? ??? ??? ?depts:[
?? ??? ??? ??? ??? ??? ?{id:1,name:'研發部'},
?? ??? ??? ??? ??? ??? ?{id:2,name:'調研部'},
?? ??? ??? ??? ??? ??? ?{id:3,name:'人事部'},
?? ??? ??? ??? ??? ??? ?{id:4,name:'客服部'}
?? ??? ??? ??? ??? ?],
?? ??? ??? ??? ??? ?dt:[],
?? ??? ??? ??? ??? ?arrays:[1,2,3,4,5],
?? ??? ??? ??? ??? ?url:'http://www.baidu.com',
?? ??? ??? ??? ??? ?attrname:'href',
?? ??? ??? ??? ??? ?eventname:'dblclick',
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?
?? ??? ??? ?methods:{
?? ??? ??? ??? ?doClick(){
?? ??? ??? ??? ??? ?alert(111);
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?})

在這里href是參數，告知v-bind指令將該元素的href屬性與表達式url的值綁定

注1：動態參數表達式有一些語法約束，evName無效,evname有效，回避大寫

二、過濾器

全局過濾器
?

?Vue.filter('filterName', function (value) {// value 表示要過濾的內容});

局部過濾器

? ?new Vue({filters:{'filterName':function(value){}}});

vue允許你自定義過濾器，被用作一些常見的文本格式化，格式如下：

? ?
?

?{{ name | capitalize }}

? ?
?

?<div v-bind:id="rawId | formatId"></div>

? ?注1：過濾器函數接受表達式的值作為第一個參數?
? ?注2：過濾器可以串聯 ? ??
? ?

? {{ message | filterA | filterB }}

? ?注3：過濾器是JavaScript函數，因此可以接受參數：?
? ?

? {{ message | filterA('arg1', arg2) }}

? ?注4：js定義一個類
? ?

? ?function Stu(){};Stu.prototype.add(a,b){};//添加一個新的實例方法

案例
首字母大寫/日期格式化

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<title></title>
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
?? ??? ?<script src="js/date.js" type="text/javascript"></script>
?? ?</head>
?? ?<body>
?? ??? ?<div id="zhq">
?? ??? ??? ?<h1>{{ts}}</h1>
?? ??? ??? ?<h2>過濾器（全局，局部）</h2>
?? ??? ??? ?<div>
?? ??? ??? ??? ?
?? ??? ??? ??? ?{{title|strFilter}}<br/>
?? ??? ??? ??? ?
?? ??? ??? ??? ?{{dt|dateFilter|strFilter}}
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</body>
?? ?<script>
?? ??? ?//全局過濾器
?? ??? ?Vue.filter('dateFilter',function(v){
?? ??? ??? ?return fmtDate(v,'yyyy年MM月dd日')
?? ??? ?});
?? ??? ?
?? ??? ?// 每個Vue應用都是通過用Vue構造器創建一個新的Vue實例開始的
?? ??? ?var vm=new Vue({
?? ??? ??? ?el:'#zhq', ? ? ? ? ? ??
?? ??? ??? ?data:function(){
?? ??? ??? ??? ?return{
?? ??? ??? ??? ??? ?ts:new Date().getTime(),
?? ??? ??? ??? ??? ?title:'hello vue!!',
?? ??? ??? ??? ??? ?dt:new Date(),
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?
?? ??? ??? ?methods:{
?? ??? ??? ??? ?
?? ??? ??? ?},
?? ??? ??? ?//局部過濾器
?? ??? ??? ?filters:{
?? ??? ??? ??? ?strFilter:function(v){
?? ??? ??? ??? ??? ?return v.substr(0,6).toUpperCase();
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ?})
?? ?</script>
</html>

三、計算屬性

? ?計算屬性可用于快速計算視圖（View）中顯示的屬性。這些計算將被緩存，并且只在需要時更新

案例
成績的總分

代碼：

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8" />
?? ??? ?<title></title>
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
?? ??? ?<script src="js/date.js" type="text/javascript"></script>
?? ?</head>
?? ?<body>
?? ??? ?<div id="zhq">
?? ??? ??? ?<h1>{{ts}}</h1>
?? ??? ??? ?<h2>計算屬性</h2>
?? ??? ??? ??? ?<div v-for="s in score">
?? ??? ??? ??? ??? ?編號={{s.id}},科目={{s.name}},成績={{s.sc}}
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<span >總分：{{sum}}</span>
?? ??? ?</div>
?? ?</body>
?? ?<script>
?? ??? ?// 每個Vue應用都是通過用Vue構造器創建一個新的Vue實例開始的
?? ??? ?var vm=new Vue({
?? ??? ??? ?el:'#zhq', ? ? ? ? ? ??
?? ??? ??? ?data:function(){
?? ??? ??? ??? ?return{
?? ??? ??? ??? ??? ?ts:new Date().getTime(),
?? ??? ??? ??? ??? ?score:[
?? ??? ??? ??? ??? ??? ?{id:1,name:'語文',sc:110},
?? ??? ??? ??? ??? ??? ?{id:2,name:'數學',sc:90},
?? ??? ??? ??? ??? ??? ?{id:3,name:'英語',sc:90},
?? ??? ??? ??? ??? ??? ?{id:4,name:'物理',sc:100}
?? ??? ??? ??? ??? ?],
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?
?? ??? ??? ?methods:{
?? ??? ??? ??? ?
?? ??? ??? ?},
?? ??? ??? ?computed:{
?? ??? ??? ??? ?sum:function(){
?? ??? ??? ??? ??? ?let s=0;
?? ??? ??? ??? ??? ?for(let sc of this.score)
?? ??? ??? ??? ??? ??? ?s+=sc.sc;
?? ??? ??? ??? ??? ??? ?return s;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?});
?? ?</script>
</html>

小結：計算屬性和監聽屬性的區別
?自己的理解

computed用來監控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義，然后就可以在頁面上進行雙向數據綁定展示出結果或者用作其他處理；
computed比較適合對多個變量或者對象進行處理后返回一個結果值，也就是數多個變量中的某一個值發生了變化則我們監控的這個值也就會發生變化，
舉例：購物車里面的商品列表和總金額之間的關系，只要商品列表里面的商品數量發生變化，或減少或增多或刪除商品，總金額都應該發生變化。這里的這個總金額使用computed屬性來進行計算是最好的選擇?

? 與watch之間的區別：watch主要用于監控vue實例的變化，它監控的變量當然必須在data里面聲明才可以，它可以監控一個變量，也可以是一個對象

總結

以上是生活随笔為你收集整理的Vue基础语法01的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ik与拼音分词器，拓展热词/停止词库
下一篇：十天学完Vue学习总结