Vue中的基本操作

实例化Vue对象

1. 先引入vue.js文件

2. script操作部分

new Vue({
	el:'#app',		 //表示vue操作范围
    data:{
        变量(键):'值'	//vue中的数据
    },
    methods:{
        方法名(){}
    }
})

3. html代码部分

<div id="app">
	//vue操作范围,习惯设置在id为app里面
</div>

文本插值

插值语法:

{{vue对象中data中的键}}
	作用: 渲染数据

文本插值语法中还可以写一些简单的业务逻辑:

eg: 性别:{{sex==1?"男":"女"}}
	{{num>10?"满足":"不满足"}}
	城市:{{obj.city}}

vue中的指令

系统指令:vue系统封装好的指令,可以直接使用
	语法格式:
		<元素 v-xxx='指令值'></元素>
		(不是所有的指令都必须设置指令值)

• 1.1 model : 用于(双向)数据绑定
  	语法规则:
  		v-model只能用于绑定表单
  		绑定关系: 表单的输入值和data中的键绑定,他们的值互相影响
  		<input type='text' v-model='键'/>
          <p>{{键}}</p>
  
          new Vue({
              el:'#app',
              data:{
                  键:'值'
              }
          })
  	需求: 当在表单中输入数据后,p标中的内容实时也在变化成相同内容
  	(原生js中需要使用 oninput键盘输入事件)
  

• 1.2 文本插值
  v-html: 文本插值,可以解析标签
  v-text: 文本插值,不能解析标签,等价于{{}}
  {{}}: 默认不解析数据中代码,为了防止xss攻击(利用网页开发时留下的漏洞,通过巧妙方法注入恶意指令代码到网页)
  v-pre:  原样输出,设置该指令的元素中 vue语法不会被解析
  

• 1.3 显示隐藏
  v-if: 控制元素显示隐藏->值为true,显示元素,值为false,不显示元素(删除节点)
  v-show: 控制元素显示隐藏->值为true,显示元素,值为false,不显示元素(给该元素设置style属性,display:none;)
  使用时机: 如果频繁操作元素显示与不显示,用v-show,不频繁使用v-if(eg:百度登录提示框)
  

• 1.4 面试题: 斗篷
  如何解决页面初始化'闪动'的问题
  工作时引入的vue.js文件需要在后面,因为vue.js加载时,需要时间(特别是在线的cdn)
  语法格式:
  	<style>
  		[v-cloak]{
  			display:none;
  		}
  	</style>
  	
  	使用:
  		<元素 v-cloak> {{插值}} </元素>
  

vue中的事件绑定

事件绑定

• 使用系统指令: v-on
  语法格式:
  	<元素 v-on:事件名='方法名()'></元素>
  	简写:
  		<元素 @事件名='方法名()'></元素>
  

方法的声明

• new Vue({
      el:'',
      data:{},
      methods:{
          方法名:function(形参..){
              方法体
          }
          简写:
          	方法名(形参){
      			方法名
  			}
      }
  })
  

方法的调用

• 1. 通过事件调用
  	v-on:事件='方法名()'
  2. 直接调用(插值语法)
  	{{方法名()}}
  

方法中的return

在vue中如果函数使用{{}}调用,函数的返回值return会渲染到页面中

在方法中获取(使用)data中的数据

获取: this.键
修改: this.键='新值'

点击按钮控制元素的显示与隐藏

可以在点击事件的方法中的设置
this.bool=!this.bool;	//v-show='bool'的值每次点击都进行取反,实现开关操作

属性绑定

由于html标签中的的属性,默认不能解析变量(不能写vue语法)

解决 --> 属性绑定

系统指令: v-bind:属性
语法格式:
	<元素 v-bind:属性='vue语法'></元素>
	简写:
		<元素 :属性='vue语法'></元素>	推荐

style属性值绑定

语法格式:
	<元素 :style="{属性:属性值,...}"></元素>

• 随机颜色: 使用rgb颜色
  //其中需要在一个方法中调用另一个方法: this.方法名()
  let color=`rgb(${this.rand()},${this.rand()},${this.rand()})`;
  this.color=color;
  
  //随机0~255的随机数
  rand(){
      return Math.floor(Math.random()*255);
  }
  

属性绑定-class

语法格式:
	<元素 :class=" {'类名':布尔值} "></元素>
	<元素 :class=" ['类名1','类名2'] "></元素>
	<元素 :class=" [布尔值?'类名1':'类名2'] "></元素>
	<元素 :class=" [{'类名':布尔值},布尔值?'类名1','类名2'] "></元素>
	<元素 :class=" {'类名':2>1} " class='类名'></元素>
	(属性绑定class和普通class不冲突)

计算属性(声明方法)

声明方法:
	声明普通方法:
    	methods:{}
    声明计算方法:
    	computed:{
    		方法名(){}
    	}
调用方法:
	1. 普通方法使用()		{{方法名()}}
	2. 计算方法不加()		{{方法名}}
		计算属性中的方法,如果返回值没有发生改变,多次调用只执行一次
		第一次调用后会把数据存到内存中,第二次如果返回值没有改变,就不去执行方法,而是从内存中获取数据
		如何让计算属性中的方法多次执行:让返回值发生改变.