vue常用指令和vue裏面使用less

Vue常用指令

指令的完整格式

v-else            //什麼都沒有，無值
v-text="val"      //有值
v-bind:src="val"  //有參，有值
v-on:click.stop="val"  //有值，有參，有修飾符

vue的常用指令：數據綁定、綁定屬性、循環渲染數據、數據渲染、顯示隱藏。

1. 數據綁定 {{ }}

<template>
	<div id="app>
		<p>{{msg}}</p>
	</div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
     msg:"瓜子二手車網",
         }
  }
}
</script>

2. v-model 綁定表單元素值的 數據雙向綁定

雙向數據綁定 ,應用於雙向的修改和刪除,只要有一端的數據改動，另外一端也跟着改動，一般用於表單元素，會忽略所有表單的value、checked、selected屬性的初始值，將Vue實例的數據作爲數據源

• v-model值綁定到 value 屬性
  input:text
  textarea
  radio
  select(無value屬性則與內容綁定)
• 複選框CheckBox
  Vue實例的數據源初始值：爲數組時與value屬性綁定
  初始值爲其他，與checked屬性綁定（true || false）
  true-value 設置選中時的值
  false-value 設置不選中時的值

3. v-bind 綁定屬性 單向綁定
   簡寫 :title=" "
   v-bind 綁定類名稱
   如何綁定多個類名稱 動態可以操作
   多個類綁定數組寫

<template>
	<div id="app>
		<p v-bind:title="title"></p>
		<p v-bind:class="classname">二手車網</p>
		<p v-bind:class="{'p1':true,'classname':true}">我是魔豆</p>
  <p v-bind:class="[classname,p1]">我是魔豆</p>
	</div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
     title:"我是標題呀！",
     classname:"classname p1"
         }
  }
}
</script>
<style lang="less">
	.classname{
 	 	color: red;
	}
	.p1{
 		 box-shadow: 0 0 5px orange;
	}
</style>

4. v-show 顯示隱藏

取值true || false 控制顯示或者隱藏，配合點擊事件（點擊事件控制取值）可實現一個開關的切換，效果就是控制
display屬性的值
true 顯示
false 隱藏

5. v-html v-text 綁定元素的文本值
   v-html :可以自動解析字符串標籤
   v-text：直接以文本顯示
6. v-for 數據的渲染 v-for="(item,index) in list" :key=" index "

<template>
	<div id="app>
		<!--
    	循環渲染數組
    	渲染數據寫給誰
    	key 不能重複
    	集合的索引
		-->
<ul>
  <li v-for="item in arr" :key="item">{{item}}</li>
</ul>
<ul>
  <li v-for="(item,index) in arr" :key="index">{{item+"/"+index}}</li>
</ul>
<ul>
  <li v-for="(item,index) in obj" :key="index">
    姓名：{{item.name}}  性別：{{item.sex}}
    <span v-for="(a,i) in item.hobby" :key="i">
      {{a}},
    </span>
  </li>
</ul>
	</div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
     arr:[1,2,3,4,5,6],
      obj:[
        {
          name:"張三",
          sex:"男",
          hobby:["籃球","足球"]
        },
         {
          name:"Lisi",
          sex:"男",
          hobby:["籃球","足球","乒乓球"]
        },
         {
          name:"mike",
          sex:"男",
          hobby:["籃球","乒乓球"]
        },
         {
          name:"張三",
          sex:"男",
          hobby:["籃球"]
        }
      ]
         }
  }
}
</script>

8. v-show 顯示 v-hide 隱藏

9. v-once一次性綁定事件

10. v-if、v-else、v-else-if 條件渲染之類的

<p v-if="btn">
    我在看你呢
  </p>
  <p v-else-if="btn">
    我在看你呢
  </p>
<p v-else>
    我在看你呢
  </p>
<!--
  條件渲染語句可以直接寫給模板
-->
<script>
export default {
  name: 'app',
  data () {
    return {
     btn:true
         }
  }
}
</script>

Vue裏面less的使用

1.安裝less cnpm install less --save-dev
2.安裝less加載文件 less-loader cnpm install less-loader --save-dev
3.去配置文件 webpack.config.js 文件去modules rules裏面添加相應的規則
{
test:/.less$/,
loader:“style-loader!css-loader!less-loader”,
}