Vue学习笔记-1

Vue的介绍

Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动

Vue的引入

<script src="http://cdn.jsdelivr.net/npm/vue@2"></script>//Vue2
<script src="https://unpkg.com/vue@next"></script>//Vue3

Vue2的使用

Vue的接管

被接管的东西双大括号里的东西会被执行
变量和字符的区别为加不加引号
基本规则不变

  <div id="box">
       {{10+20}}//显示是30
   </div>
   <script>
       new Vue({
           el:"#box"
       })
   </script>

Vue拦截

var obj={

}
var obox=document.getElementById("box")
Obj.defineProperty(obj,"myname",{
	get(){//一旦被引用了就会输出个get
		console.log("get")
	},
	set(value){//一旦被设置（覆盖，重命名，新增）就会输出set
		console.log("set",value)
		obox.innerHTML=value//可以用作实时更新
	}
})

vue3的变化
Object.defineProperty有以下缺点
无法监听es6的Set、Map变化
无法监听Class类型的数据
属性的新家或者删除也无法监听
数组元素的增加和删除也无法监听

模板语法

绑定class的话,前面加个:,“:class名”

<div id="box">
{{myname}}-{{myage}}
	<button @click="handleChange()">change</button>
	</div>
<script>

var vm= new Vue({
    el:"#box",
    data:{
        myname:"kerwin",
        myage:100
    },
    methods:{//方法
        handleChange(){
            console.log("handleChange",this)
            this.myage=18
            this.myname="tiehchui"
        }
    }
})

动态显示隐藏,创建删除

v-show,v-if
v-show:真为显示,假为隐藏
v-if:真为创建,假为删除
区别:v-show是display,v-if是元素是否存在

列表渲染

v-for,列表渲染,遍历

<ul>
	<li v-for="(item,index) in list">
		{{item}}--{{index}}
	</li>
</ul>

简化命令

v-bind=>:src
v-οnclick=>@click

todolist

<div id="box" >
    <input type="text" v-model="mytext">
    <button @click="handleAdd()">add</button>
    <ul v-show="datalist.length">
        <li v-for="(data,index) in datalist">
            {{data}}
            <button @click="handleDel(index)">删除</button>
        </li>
    </ul>
    <div v-show="!datalist.length">代办事项空空如也</div>
</div>
<script>
    var vm= new Vue({
        el:"#box",
        data:{
            datalist:["111","222","333"],
            mytext:"aaaa"
        },
        methods:{
            handleAdd(){
                this.datalist.push(this.mytext)
                this.mytext=""
            },
            handleDel(index){
                this.datalist.splice(index,1)
            }
        }
    })
</script>

v-html

站点上渲染任意的HTML可能会非常危险,因为他很容易导致xss攻击.请只对可信内容使用HTML插值,绝不要对用户提供的内容使用插值

class&style

可以使用class数组来Vue调节属性的显示与隐藏
使用vue加的class是不会加入页面效果的
如果要强行加入的话可以使用Vue.set(对象,属性),Vue2解决时无法监听新增属性而Vue3可以

条件渲染

数组的条件状态码与判断引入
多为v-if,v-else,v-else-if

template

Vue中提供包装调整Vue元素的包装盒,不会真正显示出来
可以防止一些Vue操作而引发的破坏DOM操作或者div标签被破坏无法显示的问题

列表渲染

v-for里的in可以改成of,两种都可以,没有区别
数组值是值加索引值
对象则是属性值+属性名(item,key)

key
跟踪每个节点的身份,从而重用和排序现有元素
理想的key值是每项都有的且唯一的id,手动设置可以减少内部运算甚至减少报错可能

数组更检测
a.使用这些方法操作数组可以被检测到(push(),pop(),shift(),splice(),sort(),reverse())
b.filter(),concat(),slice(),map(),新数组替换旧数组
c.不能检测vm.items[indexOfltem]=new Value(拦截索引值)

模糊查询

change事件是失去焦点且内容发生改变才会触发
所有得使用input事件

事件处理器

监听事件-直接触发代码
方法事件处理器-写函数名,handleClick
内联处理器方法-执行函数表达式handleClick($event),$event事件对象
事件修饰符https://cn.vuejs.org/v2/guide/events.htmlhttps://cn.vuejs.org/v2/guide/events.html

.stop
.prevent
.capture
.self
.once

案件修饰符

.esc
.up
.down
.left
.right
.space
.ctrl
.shift
.delete

表单控件绑定

通过v-model自己的保存,判断真假,从而实现记住用户名

计算属性

计算属性,负责逻辑,放在计算属性中写
难以维护:{{ myname.substring(0,1).toupperCase() + myname.substring(1) }}

computed{myComputedName(){
	return this.myname.substring(0,1).toUpperCase()+this.myname
}}

0.data=>被拦截
1.方法=>事件绑定,逻辑运算.可以不用return ,没有缓存
2.计算属性=>解决模板过重问题,必须有return,有缓存,同步
3.watch=>监听一个值的变化,不用返回值,异步同步

watch
fetch
get
post

组件定义

将DOM,Js,CSS封装在一起

Vue.compoonent("navbar",{
	temple:`<div style="background:red">
		<button>left</button>
		猫眼电影
		<button>right</button>
	</div>`
})

其中的属性值都是隔离的
只能在组件内部中使用

取名:js驼峰,html连接符1-
DOM片段没有代码提示没有高亮显示-vue单文件组件解决
css只能写成行内,-vue单文件组件解决
template包含一个根节点
组件无法直接访问外面的组件状态方法
自定义组件必须是一个函数

父传子

Vue.component("navbar",{
	props:["myname"],
	this.myname
	template:<div>
		<button>left</button>
		<span>{{myname}}</span>
		<button>right</button>
	<div>
})

属性验证,默认属性

props:["myname","myright"],
this.myname
props:{
	myname:String,
	myright:Blooean
}

子传父

Vue.component("navbar",{
	template:`
		<div style="background-color:red;">
			<button @click="handleClick()">点击</button>
		</div>
	`,
	method:{
		handleClick(){
			this.$emit("myevent")
		}
	}
})

时间的函数需要在父组件中定义好

New Vue({
	el:"#box"
	data:{
		isShow:true
	},
	methods:{
		handleEvent(data){
			console.log("父组件定义的事件",data)
			this.isShow=!this.isShow
		}
	}
})

Vue3

Vue3的使用

<script>
	var obj={
		data(){
			return {
				myname:"kerwin"
			}
		},
		methods:{
			
		}
	}
	Vue.creatApp(obj).moint("#box")

class&&style

动态添加可以直接完成,可以被拦截