vue学习笔记----基础使用

Vue使用CDN

<script src="https://unpkg.com/vue/dist/vue.js"></script>

Vue对象的格式

<div id="root">加油，{{name}}</div>
// {{这里可以放表达式变量函数等}}
<script type="text/javascript">  
    //方式一 ，此处是el 和data的
        // 创建vue对象 其中包含 el(某个元素) data(数据)    
        new Vue({        
        // # id选择器        
        // . class选择器        
        el:"#root",        
        data:{          
        name:"Will"        
        },   
        })
    //方式二   使用组件的话data需要写成函数式  
        const v = new Vue({                        
         data: function () {
            return {
                name: "Will",
                url: "https://www.baidu.com"
            }
        },   
        })
        v.$mount("#root")
    	//通过这种方法绑定对象
</script>

模板语法

插值语法

​ 将vue的data插入到网页的显示内容中{{ name }}。

指令语法

​ 将vue中的数据放到标签。

​ v-bind是单向绑定，即vue对象中data改变了页面中对应的值会改变，但是页面中值改变不会影响data的值。

​ v-model是双向绑定，即是某一方改变之后对应的数据不会变。v-model只能用于输入类的参数。

	// 插值语法
<div id="root">加油，{{name}}<br>
    //指令语法 v-bind:href 也可以简写为:href
    <a v-bind:href="url">linkto</a>
    <a :href="url">linkto</a>
    
    //指令语法 v-model:value="xxx" 输入参数的属性名为value也可以简写为 v-model="xxx"
    <input type="text "v-model:value="url">
    <input type="text "v-model="url">
</div>

MVVM

model ：模型(指数据)

view ：视图

viewmodel：vue中的实例对象。

Object.defineProperty

释义

其作用是为一个对象增添属性，并且设置属性的可删除，可变化等属性，并且可以将属性值与其他的变量进行关联。如果直接将某个变量的值赋予到属性，那么之后该变量的值变化，对应的属性值是不会变化的，但是通过Object.defineProperty中的get 将变量值赋予到属性，变量值会映射到属性。

   const v = new Vue({
        // # id选择器
        // . class选择器
        data: function () {
            return {
                name: "Will",
                url: "https://www.baidu.com"
            }
        },
    })
    v.$mount("#root")

    let age = 22
    let person = {
        name: "will"
    }
    Object.defineProperty(v, "age", {
    /*
    指定三个参数，对象，属性名，属性值相关配置
	value 直接指定值,enumerable 可遍历的默认为false
	writable 是否可改变 默认为false  不能与get同用
	configurable 是否可删除 默认为false
	get()     set(value) 方法 其中value是获取到的变化的值。
    get:funtion(){} 简写为get()	
    */

        // value: 22,
        // enumerable:true,
        // writable:true,
        // configurable:true,
        get:function () {
        //get(){  return xxx}
			//值与变量绑定
            return  age
        },
        set(value){
            console.log(value)
            console.log("modify value")
			//将变化的值在赋值给变量
            age = value
        }
    })
    console.log(person)

数据代理

数据代理：通过一个对象完成对另一个对象数据的读写。

在vue对象中，data的数据会在 vm的_data复制一份，然后vue对象中会生成对应的data中的key，

vue通过Object.definePropert添加对应的key，以及get/set完成对_data的数据操作，完成数据代理。

事件处理

基础使用

网页中存在与用户交互，需要处理相关事件，并且处理函数中会默认有event(鼠标事件)，但是如果对事件函数传入了参数，如果还需要使用event则 click($event,par1,par2...),使用$event。如果没有参数可以直接写@click。

如代码中的

<div id="root">
    <button v-on:click="click">美女荷官</button>
    //也可以简写为@click
    <button v-on:click="click($event,250)">美女荷官</button>
</div>
<script type="text/javascript">
    const v = new Vue({

        data: function () {
            return {
                name: "Will",
                url: "https://www.baidu.com"
            }
        },
        methods:{
            click(event,number){
                alert("666")
            }
        }
    })
    v.$mount("#root")
</script>
</body>
在这里插入代码片