淘先锋技术网

首页 1 2 3 4 5 6 7

浅聊关于vue.js

因为要做一个小程序的项目，前端要用到uni-app。特地来学习一下vue.js.vue的实力也是早有耳闻。（其实去年就想学了一拖再拖终于要开始了）

怀着激动的心颤抖的手去b站搜索学习vue.js的视频。然后 找到了尚硅谷Vue2.0+Vue3.0全套教程，网址:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili​​​​​​

前面的一些安装我就不写了毕竟跟着视频有手就行吧不会欢迎私聊我。

一些简单的模版语法

v-bind: 单项数据绑定 v-model:双向数据绑定

 <!-- v-bind进行单项数据绑定,v-model 进行双向数据绑定 -->
    <div id="root">
        <h1 id="s"> 灰原哀的真名{{name}}</h1>
         单项数据传递：<input type="text"v-bind:value="name"><br/>
         双向数据传递: <input type="text"v-model:value="name" > 

    <hr/>
    <h1 class="a">指令语法</h1>
    <a v-bind:href="url" target="_blank" rel="external nofollow" >sherry介绍</a>
<!--v-bind:  绑定的意思--""里面当作表达式进行读取吧url的执行结果绑定给href-->
        </div>

v-model:其实感觉就是为了后端服务的，把一个值传递给后端方便后端进行相关操作，而且v-model只能应用在表单类元素上。所谓表单类元素，就是那种需要有输入的元素（有value值）否则控制台那儿就会报错。

关于data 的两种写法

1.对象式2.函数式（通过代码演示一下）

第一种对象式：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
</head>
<body>
    <div id="root">
        <h1>日月神教：{{name}}</h1>
    
    </div>
    <script>
        new Vue ({
            el:'#root',
            //第一种对象式
            data:{
                name:'东方不败'

            }

        })
    </script>

    
    
</body>
</html>

第二种：函数式（日后大型项目里面常用到的方法）普通函数，不能写箭头函数

​
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
</head>
<body>
    <div id="root">
        <h1>日月神教：{{name}}</h1>
    
    </div>
    <script>
        new Vue ({
            el:'#root',
            //第二种函数式
            data:function(){
                return {
                    name:'东方教主'
            }

        }

        })
    </script>

    
    
</body>
</html>

​

然后了解了Object.defineperty(具体见代码)

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾object.defineproperty </title>
    <!-- <script type="text/javascript"src="../js/vue.js"></script> -->
</head>
</head>
<body>
    <script type="text/javascript">
let person={
    name:'东方不败',
    sex: '男',
}
//用这种方法添加进去的数值不可以进行枚举也就是遍历
    Object.defineProperty(person,'age',{
        value:18,
        enumerable:true//enumerable的作用控制属性是否可以枚举默认值是false;
    })
    console.log(person)
    console.log(Object.keys(person))
   </script>
</body>
</html>

可以用此方法向 person添加属性值但是利用这种方法添加进去的值不可以进行枚举，而且也不能进行修改 删除。利用enumerable可以取消这个不可以遍历的属性。writeable:true控制可以修改，configurable:true控制属性可以删除.

其中比较重要的关于Object.defineperty的get和set方法

通过这两个函数的调用能够实现修改一个值时相应的值会随之改变。

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾object.defineproperty </title>
    <!-- <script type="text/javascript"src="../js/vue.js"></script> -->
</head>
</head>
<body>
    <script type="text/javascript">
        let number=18
let person={
    name:'令狐冲',
    sex: '男',
}
//用这种方法添加进去的数值不可以进行枚举也就是遍历
    Object.defineProperty(person,'age',{
        get(){
            console.log('有人读取age属性')
            return number
        },
        set(value){
            console.log=('有人修改了age属性值是',value)
            number=value

        }
        // value:18,
        // enumerable:true,//enumerable的作用控制属性是否可以枚举默认值是false;
        // writable:true,
        // configurable:true,
    })
    // console.log(person)
    // console.log(Object.keys(person))
   </script>
</body>
</html>