Vue基础

Vue.js 简介

1.简单小巧的核心,逐渐式的JS框架
2.压缩后的大小20kb左右
2.渐进式:你可以一步一步,有阶段性的使用vue,不需要一开始就使用所有的东西
3.解耦视图与数据
4.可复用组件
5.前段路由
6.状态管理
7.虚拟DOM

VUE.JS有什么不同

<script>
    
    const app=new Vue({
        el:"#app",
        data:{
            showBtn : true
        },
        methods:{
            handleClick:function(){
                alert("单击了");
            }
        }
    })
    
</script>

数据绑定 和 第一个Vue

    <input type="text" v-model="name" placeholder="你的名字">
    <h1>你好,{{name}}</h1>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            name :''
        }
    })
</script>

构造函数vue就可以创建一个vue的根实例,启动Vue应用
var app = new Vue({
})
变量app就是当期那实例对象

var app = new Vue({
	el:document.getElementByid("")|"#app"
	data:{	
	}
})

app.$el:返回实例绑定的DOM元素
指令:
v-model:他的值(value)对应于我们 创建vue实例的data选择项中name字段
这就是vue的数据绑定
data:声明应用内需要双向绑定的数据,将所有可能用到的数据都应该放在data内
声明(全局变量)

console.log(app.num)
var mydata={
	num:6
}
new Vue({
	el:"#app",
	data:mydata
})
console.log(app.num)

app.num=789;

生命周期:

	$(document).ready(function(){
		//dom加载完毕后,会执行这里的代码
	})

钩子
create:实例创建完成后调用,此阶段完成了数据的观察等,但尚未挂载,
$el还不可以使用
mounted : $el挂载到实例后调用
beforeDestroy:实例销毁前调用

插值表达式:
使用大括号{{}}是最基本的插值方法,他会自动双向绑定数据

v-HTML:可以自动转译HTML标签