vue基础知识vue入门_vuevorp-CSDN博客

vue简介

vue是一套构建用户界面的渐进性（可用一部分功能特性，也可以全用）轻量级（33kb，虚拟DOM）框架，有点像java后台的freemarker、jsp。

兼容性

vue不支持IE8及以下版本。

导入vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

创建vue对象

<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  {{ message }}
</div>
<script>
//el、data是vue的固定属性。
var app = new Vue({
  el: '#app',//这里的#app对应<div id="app">里的app
  data: {//data里定义数据
    message: 'Hello Vue!'
  }
})
</script>
</html>

插值表达式（单向绑定）

在vue对象元素内，可以使用{{ xxx }}输出内容，有点像java的el表达式。
支持js语法，可以调用js函数（但必须有返回值），如new Date()。
表达式必须有返回结果，如1+1，没有结果的表达式不允许使用如，var a=1+1。
可以直接获取vue实例里定义数据和函数。
插值表达式不可用于属性值上。
栗子：

<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  {{ 1+1 }}
  {{ 1==1?'yes':'no' }}
  {{ new Date() }}
  {{ message }}
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
</html>

v-html（单向绑定）

将数据输出到元素内部，如果有html则会渲染。
栗子：

<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <span v-html='title_value'></span>
</div>
<script>
var app = new Vue({
  el: '#app'
  data: {
    title_value: '<h1>Hello Vue!</h1>'
  }
})
</script>
</html>

v-text（单向绑定）

将数据输出到元素内部，如果有html不会渲染。
栗子：

<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <span v-text='title_value'></span>
</div>
<script>
var app = new Vue({
  el: '#app'
  data: {
    title_value: 'Hello Vue!'
  }
})
</script>
</html>

v-bind（单向绑定）

用于将vue的值绑定给对应dom的属性值。
语法：v-bind:属性名 或简写：:属性名。

栗子：

<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <input v-bind:type='bindtype'/>
</div>
<script>
var app = new Vue({
  el: '#app'
  data: {
    bindtype: 'hidden'
  }
})
</script>
</html>

v-model（双向绑定）

vue提供双向绑定支持，即修改页面的值vue对象data内的数据会随之更新，修改vue对象data内部的数据，页面显示的值也会随之更新。
一般用于表单输入时使用。
input元素的radio、text都是字符串接收。
textarea元素，字符串接收。
select元素，多选用数组接收，单选字符串接收。
input元素的checkbox，多个用数组接收，单个用boolean接收。

栗子：

<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <input v-model='name'/>
  <input type='checkbox' value='Java' v-model='interests'/>
  <input type='checkbox' value='PHP' v-model='interests'/>

  <input type='checkbox' v-model='isOK'/>
</div>
<script>
var app = new Vue({
  el: '#app'
  data: {
    name: '张三',
    interests:['Java'],//多个复选框使用数组接收
    name: true//单个复选框使用布尔接收
  }
})
</script>
</html>

v-on（事件绑定）

vue提供事件绑定支持
语法：v-on:事件名 或简写：@事件名。
栗子：

<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <input type='button' v-on:click='show()'/>
</div>
<script>
var app = new Vue({
  el: '#app'
  methods: {
    show: function(){
		alert('show');
	}
  }
})
</script>
</html>

v-for（循环输出）

语法：v-for="itemXXX in arrayXXX"或v-for="(itemXXX,indexXXX) in arrayXXX"
可以多层嵌套使用，也可以配合v-if嵌套使用。
栗子：

<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <table>
	  <tr v-for="user in users">
		  <td>{{user.name}}</td>
		  <td v-text="user.age"></td>
	  </tr>
  </table>
</div>
<script>
var app = new Vue({
  el: '#app'
  data: {
    users: [{name:'zhangsan',age:18},{name:'lisi',age:28}]
  }
})
</script>
</html>

v-if（条件判断）

v-if控制元素是否渲染，也就是说如果条件为false，连所在的元素都不存在。
可以多层嵌套使用，也可以配合v-for嵌套使用。
栗子：

<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
	 <label v-if="showLabel">A</label>
	 <span v-else-if="showSpan=='TRUE'">B</span>
	 <p v-else>C</p>
</div>
<script>
var app = new Vue({
  el: '#app'
  data: {
    showLabel: false,
    showSpan: true
  }
})
</script>
</html>

生命周期

直接上官网的图：
在这里插入图片描述
太复杂了对不对，其实我们一般只关注vue给我暴露出来的钩子，也就是虚线箭头指向的created、mounted等等。
created函数在渲染之前执行。
mounted函数在渲染之前执行

栗子：

<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
	 <label v-if="showLabel">A</label>
	 <span v-else-if="showSpan=='TRUE'">B</span>
	 <p v-else>C</p>
</div>
<script>
var app = new Vue({
  el: '#app'
  created(){
  	console.log('渲染之前');
  },
  mounted(){
  	console.log('渲染之后');
  }
})
</script>
</html>