vue基础一

系列文章目录

<font color=#999AAA

---

Vue渐进式js框架
声明式渲染 组件系统 客户端路由器 集中式状态管理 项目构建
易用：灵活：高效
1、vue的基本使用
el:元素的挂载位置（值可以是css选择器或者是dom选择器）
data:模型数据（值就是一个对象）
2、差值表达式
  将数据填充到html标签中
  差值表达式支持基本的计算操作
3、vue代码运行原理分析
  概述编译过程的概念（vue语法 -- vue框架--原生js语法）
4、

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

vue模板语法

1、前端渲染
把数据填充到html标签中
2、前端渲染的方式

 - 原生js拼接字符串
 - 使用前端模板引擎
 - 使用vue特有的模板语法
3、原生js拼接字符
   基本上就是将数据以字符的方式拼接到html标签中，前端代码
 缺点是不同的代码风格差别很大。后期维护变得困难。
4、前端模板引擎
5、vue模板语法
  
  
 

指令

 1. 本质就是自定义指令  v-开始
 2. v-cloak   
 		差值表达式存在的问题：闪动
 		解决该问题就是使用v-clock指令
 		原来是先隐藏，替换好之后在显示总终的值
3、数据绑定指令
  v-text 填充纯文本
  相对于差值表达式更加简洁
  v-html 填充html片段
  存在安全问题
  本网站内部数据可以使用，来自第三方数据不能使用
  v-pre填充原始数据
  显示原始信息，跳过编译过程（分析编译过程）
4、数据响应式
   html5的响应式（屏幕的尺寸变化会导致样式的变化）
   数据的响应式（数据的变化会影响页面内容的变化）
5、数据绑定
    数据填充到标签中
6、v-once只编译一次
   如果显示的信息后续不用在修改，可以使用，提高性能 后面不能构更改
7、双向数据绑定
   v-model  数据的变化会影响内容的变化  内容的变化会影响数据的变化。 
8、 MVVM设计思想  
   M(model) 数据 data中的数据 
   V（view）  模板 页面展示内容（dom）
   VM（View-Model）   逻辑 通过VM完成交互 
   如下图显示，有视图到数据，需事件的监听，由数据到视图需要数据的绑定。

   
 

事件绑定

 1. v-on指令
    <input type="text" v-on：click=‘num++’/>
    <input type="text" @click=‘num++’/>
2. 事件函数的调用
	1 直接绑定函数名称
	<button v-on:click='handle'>HELLO</button>
	调用函数需要在methods中写函数
		 methods: {
	                handle: function() {
	                    /* 这里的this是vue实例对象 */
	                    console.log(this === vm)
	                    this.num++;
	                }
	            }
	2 调用函数
	<button v-on:click='say()'>say hi</button>
	
3.事件参数传递
	普通参数和事件对象
	<button v-on:click='say("hi",$event)'>Say hi</button>
	如果事件对象直接绑定函数名称，那么默认的会传递事件对象作为事件函数的第一个参数
	如果事件绑定函数调用，那么函数必须作为最后一个参数显示，并且事件对象名称必须是$event
	 <button @click='handle2(123,236,$event)'>点击2</button>
	  methods: {
                handle2: function(p, p1, event) {
                    /* 这里的this是vue实例对象 */
                    console.log(p, p1)
                    console.log(event.target.innerHtml)
                    this.num++;
                },
4.事件修饰符
	.stop阻止冒泡
	<a v-on:click.stop="handle">跳转</a>
	.prevent阻止默认行为
	<a v-on:click.prevent="handle">跳转</a>
5、按键修饰符
	enter回车键
	<input v-on:keyup.enter='submit'>
	delete删除键
	<input v-on:keyup.delete='handle'>
6、自定义按键修饰符
	全局config.keyCode对象
	 Vue.config.keyCodes.f1 = 65
	v-on:keyup.f1='handle'   
	名字是自定义的，但是值是按键值

属性绑定

动态处理属性
1、v-bind指令
<a v-bind:href='url'>跳转</a>
缩写形式
<a :href='url'>跳转</a>
2、v-model的底层实现原理
  <input :value="mag" @click="mag=$event.target.value">
  也可以实现双层数据绑定 v-bind 和v-on的组合

样式绑定

 1.class样式处理
 	<div v-bind:class="{active:isActive}"></div>
 	数组语法
 	<div v-bind:class="{activeClass,errorClass}"></div>
2、style样式处理
	<div v-bind:style="color:activeColor,fontsize:fontSize"></div>
 	数组语法
 	<div v-bind:style="[baseStyles,overridingStyles]"></div>
 代码如下
 <div v-bind:style='[obgStyles,overrideStyles]'></div>
 data:{
  overrideStyles:{
          border:'5px solid orange',
          backgroundColor:'blue',

        }
 },
methods: {
        handle:function(){
          this.heightStyle='100px';
          this.objStyles.width='100px';
        }
      }
    }); 	 	

分支循坏结构

 1. v-if 
 2. v-else
 3. v-else-if
 4. v-show
	v-show控制元素样式是否显示 实际就是display:none
 5. v-if与v-show的区别
  	v-if控制元素是否渲染  之后不再改变
  	v-show控制元素是否显示（已经渲染到了页面） 频繁的显示切换 显示与不显示
 6. 循坏结构
  	1 v-for遍历数组
  	<li v-for='item in list'>{{item}}</li>
  	<li v-for='{item,index} in list'>{{item}}+'---{{index}}' </li>
  	2 key的作用：帮助Vue区分不同的元素，提高性能
  	<li :key='item.id' v-for='{item,index} in list'>{{item}}+'---{{index}}' </li>
  	<div v-for='(value,key,index) in object'></div>
  3 v-if和v-for结合使用 但是并不推荐
  <div v-if='value==12' v-for='(value,key,index)'></div>
  

---