Vue 前端框架神器（前端必备）

欢迎访问个人博客http://www.jkraise.top

Vue 前端框架神器

Vue 的特性

• 数据驱动视图 （是单项的数据绑定）
  • 数据的变化会驱动视图更新
• 双向数据绑定 （不操作DOM的前提下，自动把用户填写的内容同步到数据源）

注意：数据驱动视图和双向数据绑定的底层原理是MVVM（Model数据源，view视图，ViewModel 就是vue的实例）

前提

• 引入Vue

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

• 定义div 标签，设置好选择器 可以用类也可以是其它的选择器

• 在js中使用view 提供数据

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

<script>
	window.onload = function(){
		var app = new  Vue({
			// 定义el 变量和data
			el: '.box',
			data:{
				content:'hello vue'
			}
			
		})
	}
</script>

<div class='box'>
	<div>{{content}}</div>
</div>

v-bind

• 1 在属性前 添加v-bind: 可以简写:
• 2 属性的值 就可以写在vue对象里的data中了
  

vue语法{{}} 与Django 模板语言冲突 ,为了解决 可以修改为自定义

• 在 vue对象中 delimiters:['[[', ']]']
• 修改成了 [[]] 中括号
  

v-if 判断标签 是否 渲染

注意vif 和 vshow的区别

• 注意： isshow 是控制 标签的 display 参数 ：true & false

调用方法 @ 或者 v-on

• 在 vue对象中 添加methods
• 在标签中用@click调用方法

列表的方式

data: {
    
    // 01 普通列表
    itemList:[1,2,3,4,5],
    // 列表下标
    indexList:['a','b','c','d'],
    // 03 只有一个对象
    objDate:{
        name:'小明',
        age:19
    },
    // 04 对象列表
    objList:[
        {
            name:'养猪的男孩',
            age:20
        },
        {
            name:'养牛的男孩',
            age:23
        },

    ]
}
    
<ul>
    <li v-for="item in itemList">{{item}}</li>
    <li v-for="(item,index) in indexList">下标{{index}}==={{item}}</li>
    <li v-for="item in objData">{{item}}</li>
    <li v-for="(key,obj) in objData">属性值{{obj}}----属性名{{key}}</li>
    <li v-for="obj in objList">{{obj.name}}---{{obj.age}}</li>
</ul>
    

箭头函数

注意

• 箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: function(){
      console.log(this.name)
   }
}

A.sayHello();// 输出A

var B = {
  name: 'B'
}

A.sayHello.call(B);//输出B

A.sayHello.call();//不传参数指向全局window对象，输出window.name也就是window

• 2

  var name = 'window'; 
  
  var A = {
     name: 'A',
     sayHello: () => {
        console.log(this.name)
     }
  }
  
  A.sayHello();// 输出的是window
  

• 3 使用闭包

  var name = 'window'; 
  
  var A = {
     name: 'A',
     sayHello: function(){
        var s = () => console.log(this.name)
        return s//返回箭头函数s
     }
  }
  
  var sayHello = A.sayHello();
  sayHello();// 输出A 
  
  var B = {
     name: 'B';
  }
  
  sayHello.call(B); //还是A
  sayHello.call(); //还是A
  

小案例 todolist

• 1 for循环初始化数据的显示 items = ['学习vue'， '学习Django', '学习python']

  • <li v-for="item in items">{{item}}</li>

• 2 添加点击事件

  • <button @click="addItem"></button>

• 3 在点击事件里 完成输入框的 数据到列表的添加

  • 3.1

    • <input type='text' v-model='itemvalue'>

  • 3.2

    • var app = new Vue({
      	el:"#app",
      	data:{
      		itemvalue:'',
      		items = ['学习vue'， '学习Django', '学习python']
      	},
      	methods:{
      		addItem:function(){
                  	//把输入的数据 添加到items里去
                  	this.items.push( this.itemvalue)
                     	//清空输入框
                     	this.itemvalue=''
                  }
      	}
      })
      

完整代码

<div id="app">
    <input type="text" v-model="itemvalue">
    <button @click="addItem">添加</button>
    <hr/>
    <ul>
        <li v-for="item in items">{{item}}</li>
        
    </ul>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
        	itemvalue:'',
            items: ['学习Vue', '学习Django基础', '学习Django前台'],
        },
        methods: {
            addItem:function(){
            	//把输入的数据 添加到items里去
            	this.items.push( this.itemvalue)
               	//清空输入框
               	this.itemvalue=''
            }
            
        }
    })
</script>

动效

• 通过transition组件，在自定义元素的进场(Enter)，退场(Leave)，以及过程过渡的样式，

  • v-enter-from 元素在进场之前的样式
  • v-enter-active 元素在进场过程中的样式
  • v-enter-to 元素在进场结束时的样式
  • 元素退场
  • v-leave-from 元素在退场之前的样式
  • v-leave-active 愿随在退场过程中的样式
  • v-leave-to 元素在退场结束时的样式

• 自定义类名

  因为在一个项目中，可能有多个需要过渡的元素，还互相不关联，这个时候，如果都用默认的类名，会发生样式的覆盖，因此要进行 类名自定义

  只要给transiton组件添加一个属性 name=“自定义的前缀”

  条件与动态切换

  和基本使用是一样的，
  注意: 如果 多个元素进行动态切换，标签名还一样，就要给 每个标签添加一个属性 key 为了让Vue知道 这是两个元素，才能发生过渡效果

  如果不写key vue在对比的时候 看到标签名一样 以为是一个元素 不会发生元素的更新 因此只对