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”,
}