vue js基础语法

什么是vue

• vue是目前前端主流的js框架，它和库的区别在于：
• 库是更多是一个封装好的特定的集合，提供给开发者使用，而且是特定于某一方面的集合(方法和函数)，库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度理解库;
• 框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发。
• 当前主流的前端框架除了Vue还有React、Angular

Vue有什么优势

• Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项 目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页面应用。
  Vue,js连续第4次登顶年度综合排行榜，它的GitHub在2019年新增了超过30k的star
• Vue参考网站

Vue基础语法

1.导入vue.js

通过外部引入vue.js来初始化vue对象

• 外部cdn引入
• 本地导入

2.模板渲染

• 在引入vuejs文件后，需要在<script>标签中实例化vuejs对象才可以在网页中使用vuejs模板语法，即使用{{模板变量}}打模板语法渲染vue对象中的变量

<div id="app">
 {{message}} 
</div>
<script src="./vue.js"></script>
<script>
var app = new vue({
	el:'#app',
	data:{
		message: 'He11o vue!'
	}
})
</script>

3.vue的插值

在vuejs语法中，可以在实例化的vue对象中的data属性里，直接定义变量通过模板渲染的方式直接将变量渲染到网页中或者时元素属性中

<div id="app">
	{{message}}
  <h1 :title='obj.age'>
	{{obj.name}}
   </h1>
</div>
<script src="./vue.js "></script>
<script>
var app = new vue({
  el: '#app',
  data: {
	message: 'He11o vue!'
	obj:{
      name: '张三”,
	  age:8
	}
  }
})
</script>

• vue对象中的data属性不仅可以用来文本渲染/属性渲染，也可以用来绑定切换class属性以及style

<div id="app">
<!-- 1，绑定class类名，通过字符串形式添加-->
	<div :class='classstr'>我是通过字符串形式添加的类名</div>
<!--2，通过对象的形式绑定类名,判断对象里属性的布尔值进行添加class-->
	<div :class='classobj'>通过对象绑定类名</div>
	<button @click='classobj.red = !classobj.red'>切换</button>
<!--3.通过数组的形式绑定类名-->
	<div :class='classArr'>通过数组绑定类名</div>
<!--1.通过字符串形式添加样式-->
	<div :style='colorstr'>通过字符串形式添加样式</div>
<!--2.通过对象的形式添加样式-->
	<div :style='colorobj'>通过对象的形式添加样式</div>
<!--3.通过数组的形式添加样式-->
	<div :style='[colorobj, colorobj2]'>通过数组的形式添加样式</div></div>
<script>
new vue({
	el:'#app',
	data:{
	classstr:'red font-size25',
	classobj:{
	red:true,
	'font-size25 ' :true
},
classArr:['red', 'font-size25'],
colorstr: ' color:green',
colorobj:{
	color: ' green ',
	fontsize: ' 30px'
},
colorobj2:{
	fontweight: 'bo1d'
		}
	}
})
</script>

4. vue过滤器

vuejs提供了一个可以用来过滤当前模板渲染语法中内容的API，对网页中的内容文本进行过滤修改

<div id="app">
	<div>
	{{num | max10}}
	</div>
</div>
<script>
new vue({
el: '#app',
data: {
	num: '111'
	}，
//过滤器对象，里面可以放多个过滤器
filters:{
//当num超过时的时候,将显示的内容置为10 
//value为需要过滤的参数
max10(value){
	if(value > 10)
	return 10
	}
  }
})
</script>

注意: filters对象为vuejs中的过滤器属性，里面可以存放多个不同的过滤器，每一个过滤器函数都要有一个返回值。

4.计算属性

• 计算属性用来监听多个数据，每次页面加载，计算属性中的函数立即执行，但是只要原数据不被修改，那么，就不会触发重新计算，计算属性会使用计算后的缓存结果，只当原数据修改时，才会重新计算并将结果缓存起来。计算属性的计算结果可以当做data中的数据一样使用。

<div id="app">
	 <div>num当前是:{{num}}</div>
  	<div>1.当前num值是{{message}}</div>
 	<div>2.当前num值是{{msg}}</div>
	<button v-on:click='change'>改变num的值</button>
</div>
<script>
	new vue({
	  el: '#app',
	  data: {
		num: 1,
		message:'奇数’
	},
	methods: {
	//每次点击后都会执行以下代码
	change(){
		this.num = Math. floor(Math .random( * 2)
		//判断奇数偶数
		this.message = this.num%2=0 ?'偶数’:'奇数'
		console.log('该函数被调用了')
	}
},
//计算属性
computed:{
//计算属性会自动监听this.num 的值，只要在函数中影响到this.num的值,才会被调用
	msg(){
		console.log('计算属性被调用了')
		return this.num % 2 =- o?'偶数’:'奇数'
		}
	}
})
</script>