Vue入门教程笔记(一)

最近对Three.js比较感兴趣,遂从Vue开始学习大前端,至于什么时候开始Three.js的学习,后面看情况再说。

参考笔记:https://www.yuque.com/cessstudy/kak11d/gui5ta

一:Vue环境搭建及第一个Demo

1:编程工具:

下载Vscode,并安装插件

在Extensions 选项中搜索插件:

1:Live Server:将当前项目作为根路径,启动一个服务端,这样右键就会有如下选项

图片

2:Eclipse Keymap:作为后端开发工程师,习惯了Eclipse 的快捷键,当然要安装这个插件,貌似有些快捷键还是要自己设置。

2:开始Vue:

官网:https://cn.vuejs.org/v2/guide/installation.html

基于Vue2.x版本开始学习:

1:下载开发版本的Vue.js,开始第一行代码:

工程目录结构如下:

图片

完整代码:

    <!DOCTYPE html>
<html lang="en">

<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>
    <!-- 引入Vue -->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>

    <div id="demo">
        <h1>Hello, {{name}}</h1>
    </div>

    <script type="text/javascript">
        // 关闭 引入的vue为开发环境版本的提示
        Vue.config.productionTip = false;
        // 开启页面开发者工具
        Vue.config.devtools = true
        var vm = new Vue({
            el: '#demo',
            data: {
                name: 'hanzhe'
            }
        })
    </script>
</body>

</html>

主要步骤:

1:引入Vue.js:

    <!-- 引入Vue -->
    <script type="text/javascript" src="./js/vue.js"></script>

2:创建一个div容器,并设置一个id的标签属性,h1中使用{{xxxx}},至于为什么这么写,目前先记住是这样规定的。xxx为js的表达式,例如 a, a+b ,demo()等

3:创建Vue实例:

<script type="text/javascript">
        // 关闭 引入的vue为开发环境版本的提示
        Vue.config.productionTip = false;
        // 开启页面开发者工具
        Vue.config.devtools = true
       // 至于变量名称为什么为vm学过MVVM 就明白了
        var vm = new Vue({
            el: '#demo',// el表示元素,绑定id为demo的容器
            data: {
                name: 'hanzhe'// name为div中对应的名称
            }
        })
    </script>

这样,第一个Vue案例就成功了,右键 open with live server在浏览器上的展示:

图片

3:官网推荐安装:Vue Devtools

科学网在chrom上安装此拓展程序:安装完并开启后,并没有在F12的面板中查看到想要的效果:

图片

一顿百度后,说是要修改配置:找到拓展程序的安装目录:

查找方法:

图片

个人资料路径即为拓展程序安装路径,找到对应的拓展程序修改,manifest.json文件里面的值:

 "persistent": true //修改为ture 

大功告成,至于这个开发者工具有什么作用,目前未知。

二:模板语法

vue中模板语法包括两大类,插值语法、指令语法

  • 插值语法:

功能:用于解析标签体内容

写法:{{xxx}},xxx是js表达式,可以直接读取到data中的所有区域,像上面demo中的{{name}}。

  • 指令语法:

功能:用于解析标签(包括:标签属性、标签体内容、绑定事件……)

举例:

<body>

    <div id="demo">
        <h1>Hello, {{name}}</h1>
        <a href={{url}}>跳转</a>
    </div>

    <script type="text/javascript">
        // 关闭 引入的vue为开发环境版本的提示
        Vue.config.productionTip = false;
        // 开启页面开发者工具
        Vue.config.devtools = true
        var vm = new Vue({
            el: '#demo',
            data: {
                name: 'hanzhe',
                url: 'wwww.baidu.com'
            }
        })
    </script>
</body>

在div中有一个超链接,href标签属性值用插值语法,data中也有对应的值,查看页面能否达到想要的效果:

图片

 

页面报错,提示不能使用{{xxx}}插值语法,需要使用v-bind或者

修改如下:即可正常跳转指定的链接地址,v-bind还可以简写为 : 冒号

深理解,指令语法用于解析标签属性、绑定事件,插值语法解析标签体内容

<body>
    <div id="demo">
        <h1>Hello, {{name}}</h1>
        <a v-bind:href="baidu.url">跳转1</a>
        <!-- 简写 -->
         <a :href="baidu.url">跳转2</a>
    </div>
    <script type="text/javascript">
        // 关闭 引入的vue为开发环境版本的提示
        Vue.config.productionTip = false;
        // 开启页面开发者工具
        Vue.config.devtools = true
        var vm = new Vue({
            el: '#demo',
            data: {
                name: 'hanzhe',
                baidu:{
                    url:'https://www.baidu.com/'
                }
            }
        })
    </script>
</body>

三:数据绑定

Vue中有2种数据绑定的方式:

  • 单向绑定:v-bind只能从data流向页面

  • 双向绑定:v-model数据不仅能从data流向页面,还可以从页面流向data

备注:

双向绑定一般应用在表单类元素上,如input ,select,textarea等

v-modul:value可以简写v-model,因为v-model默认收集的就是value的值

        <!-- 数据绑定 -->
        <!-- 单向数据绑定 -->
        <p>
            单向数据绑定:<input type="text" v-bind:value="name">
        </p>
        双向数据绑定:<input type="text" v-model="name">

如图,使用v-model绑定的值,当input中的内容修改时,vm._data.name中的值也相应的发生了变化,如果修改v-bind的值,仅仅是v-bind那个input的值发生了改变。

图片

 

四:el与data的两种写法

el的两种写法:

1:创建vue实例对象时配置el属性

2:先创建Vue实例,随后再通过vm.$mount('#root')指定el的值

data的两种写法:

1:对象式:data:{}

2:函数式:data(){return {}}

如何选择:目前哪种写法都可以,以后到组件时,data必须使用函数,否则会报错。

一个重要的原则:

有vue管理的函数,一定不要写箭头函数(没明白,先记着),否则this就不再是Vue实例了

    <script type="text/javascript">
        // 关闭 引入的vue为开发环境版本的提示
        Vue.config.productionTip = false;
        // 开启页面开发者工具
        Vue.config.devtools = true
        var vm = new Vue({
            // el的第一种写法
            // el: '#demo',
            // data的第一种写法
            // data: {
            //     name: 'hanzhe',
            //     baidu: {
            //         url: 'https://www.baidu.com/'
            //     }
            // }

            // data的第二种写法,函数式
            data() {
                return {
                    name: 'zhangsan',
                    baidu: {
                        url: 'http://www.baidu.com'
                    }
                }
            }
        })
        // el的第二种写法
        vm.$mount("#demo")
    </script>

五:MV VM 模型

图片

MVVM模型:

  • M:模型Model,data中的数据

  • V:视图View,模板代码

  • VM:视图模型ViewModel,Vue实例,所以用vm表示vue实例

观察发现:

  • data中所有的属性,最后都出现在vm身上,属性为_data

  • vm身上所有属性及Vue原型,身上所有属性,在Vue模板中都可以直接使用。

<body>

    <div id="demo">
        <h1>名称, {{name}}</h1>
        <h1>年龄, {{age}}</h1>
        <h1>测试, {{$options}}</h1>
    </div>
    <script type="text/javascript">
        // 关闭 引入的vue为开发环境版本的提示
        Vue.config.productionTip = false;
        // 开启页面开发者工具
        Vue.config.devtools = true
        var vm = new Vue({
            data() {
                return {
                    name: 'zhangsan',
                    age: 12
                }
            }
        })
        // el的第二种写法
        vm.$mount("#demo")
    </script>
</body>

图片

 

六:数据代理

使用Object.defineProperty对属性进行绑定

    <script type="text/javascript">

        let number = 18
        let person = {
            name: 'zhangsan',
            sex: '男',
        }
        // 当有人读取person的age属性时,get函数(getter)呗调用,且返回值就是age的值
        Object.defineProperty(person, 'age', {
            value: 90
        })

        console.log(person)
    </script>
// 控制台输出
{name: 'zhangsan', sex: '男', age: 90}

数据代理:通过一个对象代理另外一个对象中属性的操作(读/写):

<script type="text/javascript">
        let number = 18
        let person = {
            name: 'zhangsan',
            sex: '男',
        }
        // 当有人读取person的age属性时,get函数(getter)呗调用,且返回值就是age的值
        Object.defineProperty(person, 'age', {
            // value: 90,
            get() {
                console.log("有人读取了属性")
                return number
            },
            set(value) {
                console.log("有人修改了属性")
                number = value
            }
        })
        console.log(person)
    </script>

图片

 

基本原理:

  • 通过object.defineProperty()把data对象中属性添加到vm上

  • 为每一个添加到vm上的属性,都有一个getter,setter

  • 在getter,setter内部去操作读写data中对应的属性

图片

 

Vue将data中的数据拷贝了一份到_data属性中,又将_data里面的属性提到Vue实例中,通过defineProperty实现数据代理,这样通过getter/setter操作name进而操作_data中的name,又对data进行数据劫持,实现响应。

目前概念还是有点模糊,继续往下学习。

 

from:https://mp.weixin.qq.com/s/gkTPoBJkQoPpUfrDtzZkzA

 

posted @ 2023-02-21 16:10  imxiangzi  阅读(202)  评论(0编辑  收藏  举报