Vue浅解

Vue

一、初识vue

1、什么是vue

Vue是一个轻量级框架

组件化

数据的双向绑定

​ Vue是一个MVVM框架，数据双向绑定。

指令

​ Vue.js与页面交互，通过指令完成

组件化

​ 对某一个功能进行封装，可重复用的代码

路由

​ vue-router—>官方插件，进行页面跳转

状态管理

vuex进行存储

2、vue实例

vue引入

超链接

3、声明式渲染

1）显示

插值表达式：{
  {message}}

v-bind:title = “message”     /      :title = "message"

v-if=“seen”

v-for =“item	in	muster”			{
  {item}}

v-on:click="click"		/	@click="click"

v-model='message' ==>双向绑定

2)添加数据

     添加数据

​     todos.push() ==> 添加到末尾

​	删除末尾元素 ==> todos.pop()

​      todos.unshift()  ==> 添加到开头

​	删除开头元素 ==> todos.shift()

3）数组截取数据

v-for='item in  demoArray.slice（0,5）'

二、模板语法

1、文本

数据绑定最常见的方式就是使用‘’Mustache‘’语法（双大括号）的文本插值：

例：

<span>Message: {
  { msg }}</span>

指令：v-once

含义：执行一次性的插值

通过使用v-once指令，你也能执行一次性的插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其他数据绑定：

例：

<span v-once>这个将不会改变：{
  { msg }}</span>

2、原始 HTML

指令：v-HTML

含义：使style得以表达

例：

<span v-html="messagehtml"></span>

  <script>
        new Vue({
            el:'#app',
            data: {
                message: '文本内容',
                messagehtml: `
                <span style="color: red">这段颜色是红色的</span>
                `,
            }
        })
    </script>

指令：v-text

含义： v-text结果和插值表达式 是一样的

例：

<span v-text="messagehtml"></span>

插值表达式支持JavaScript表达式的使用

<!-- 算数运算符 -->
        <div>
            number+1运算: {
  {number + 1}}
        </div>
        <!-- 三元运算符 -->
        <div>
            三元运算符：{
  { ok ? "yes" : "no" }}
        </div>
        <!-- 函数运算 -->
        <div>
            <!-- 翻转 -->
            {
  {message.split('').reverse().join('')}}
        </div>
        <!-- 绑定的都只能包含单个表达式 -->
        <!-- {
   { let a = 1}} -->

3、动态参数

指令： :[]=’’

举例：

<p :[name]='value'>测试动态参数</p><script>	const app = new Vue({	el: '#app',	data () {		name = '李白',		value = '嘿嘿~'	}	})</script>

4、条件渲染

1、v-if v-else-if v-else

不可见的元素包裹

key：用于管理可复用元素的

2、v-show

注意：不支持template，也不支持v-else

区别：

1. v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；2.  v-show 有更高的初始渲染开销（频繁切换，建议使用 v-show），而 v-if 的首次渲染开销要小的多；3.  v-if 有更高的切换开销，v-show 切换开销小；4.  v-if 有配套的 v-else-if 和 v-else，而 v-show 没有5.  v-if 可以搭配 template 使用，而 v-show 不行6.  v-if 是惰性的，出事条件什么都不做，当第一次为真，才开始条件渲染7.	v-show 不管出事条件是什么，元素一直被渲染，基于css进行切换，display注意： 不推荐v-if和v-for一起使用（v-for优先级高一点）

5、语法糖

v-on

===》@

<button @click='func(‘hello’, $event)>

v-bind

===》：

动态设置

<button @[event]='value'>

const app = new Vue({	el: '#app',	data: {		message: 'hello'	},	methods: {		func(message, event) {						}	}})访问原始dom事件

6、事件修饰符

1、stop 阻止冒泡事件

<div @click=''>	<button @click.stop='func'>...</button></div>

2.prevent 阻止默认事件

<@click.prevent>

3.Once 只允许点击一次

4、keyup

5、enter

6、delete

7.计算属性

{
  {reverse}}computed：{	reverse（）{	  	return	this.message。split('').reverse().join('')	}}

计算和方法的区别：

计算属性是基于他们的响应式依赖进行缓存的，只有相关响应式依赖发生改变时，他们才会重新求值。

方法是多次执行的

//方法methods: {  reversedMessage: function () {    return this.message.split('').reverse().join('')  }}//计算属性computed: {    // 计算属性的 getter    reversedMessage: function () {      // `this` 指向 vm 实例      return this.message.split('').reverse().join('')    }  }

8、侦听属性

用来侦听某个属性是不是变化的

const app = new Vue({	el: '#app',	data: {		message: 'hello'	},methods: {  reversedMessage: function () {    return this.message.split('').reverse().join('')  }}//计算属性computed: {    // 计算属性的 getter    reversedMessage: function () {      // `this` 指向 vm 实例      return this.message.split('').reverse().join('')    }  }  //侦听属性  watch： {  	 	message（val，oldval）{  	 	}  	 	list{  	 		Handle(val,oldval){  	 		  	 		},  	 		deep:true  	 	}  }})

9、class

v-bind:class=‘red’

对象语法

:class = “{key:value}”

数组语法

:class=’[key,value]’

数组语法可以用三元表达式

:class=’[‘isRed’?red : green]’

10、style

style优先级高于class

style 的普通使用

<h2 :style='colorRed'>hello world</h2>

style的对象语法

<h2 :style='{isRed: color}'></h2>color是data中的数据

style的数组语法

<h2 :style='[color,font]'></h2>data() {	return {		color: {color:red},		font: {fontSize:28px}	}}

11、v-for

data: {	array:[		{text:'aaaaa'},		{text:'bbbbb'},	]}//顺序是固定的，名字可变this.array.foreach((item, index, data) ==> {})

v-for：数组、对象、数字

数组

<h2 v-for='item in array'></h2>

对象

data：{	object： {		title：'标题',		author:'作者'	}}//注意不能保证拿到的值和数据源的顺序是一致的//value<p v-for='value in object'></p><p v-for='(value,key) in object'></p><p v-for='(value,key，index) in object'></p>

就地更新

当数据循序改变时，只是元素显示的索引正确，但并没有真正的更新到DOM中。

解决方案：绑定key属性，尽量使用字符串或数值类型

<p v-for='(value,key，index) in object' :key='index'></p>

数字

循环十次，number从1开始，index从0开始

<p v-for='number in 10'></p>

<p v-for='(number，index) in 10'></p>

v-for不能与v-if同时使用

v-for优先级高于v-if

解决办法：

先处理数据再v-for

computed：{}

12、表单输入

文本

<input v-model='message'></input>data: {	message: ''}相当于两个指令的集合1. :value='message'2. @input='message=$event.target.value'

多行文本

<textarea v-model='message'>	{
  {message}} //不起作用</textarea>

复选框

<input type='checkbox' id='chx' v-model='checked'></input><label>{
  {checked}}</label>data: {	checked: false}