Vue01

最新推荐文章于 2024-01-03 09:11:03 发布

uxiang_blog

最新推荐文章于 2024-01-03 09:11:03 发布

阅读量197

点赞数

分类专栏： # 前端三要素和前端框架文章标签： vue.js

本文链接：https://blog.csdn.net/uxiang_blog/article/details/107049181

版权

前端三要素和前端框架专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言：此笔记是根据狂神哔哩哔哩视频所写，转载请自动附上链接：狂神哔哩哔哩](https://space.bilibili.com/95256449)

Vue

一、开发工具

开发工具：在这里插入图片描述

下载官网：https://code.visualstudio.com/

开发Vue所用到的必要插件：

在这里插入图片描述

作用：语法高亮、智能感知、Emmet等

在这里插入图片描述

作用：纠正语法

在这里插入图片描述

作用：代码提示

在这里插入图片描述

作用：方便浏览器预览html文件

二、Vue学习

1、什么是vue？

vue官网：https://cn.vuejs.org/（通过官网学习）

vue简介：是一个渐进式JavaScript框架，它是由能够实现基本功能的核心库和一些具有有专门功能的插件组成，而根据项目的复杂程度在原有的基本功能上通过逐步添加插件增加其他功能的框架。它是作者尤雨溪集结合了前端框架angular（模板和数据绑定技术）的和react（组件化和虚拟DOM技术）两者优点，遵循MVVM模式的框架，称为Vue。

2、vue怎么使用？

2.1、创建项目

打开一个目录VueStudy(自己建的)
新建目录01HelloWorld
在目录01HelloWorld下新建文件index.html（用来写代码）

引入vue.js

新建01HelloWorld同级目录js（从官网下载）
将从官网上下载的vue.js文件复制到js下面

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WcYRqirL-1593517595478)(C:\Users\游翔\AppData\Roaming\Typora\typora-user-images\image-20200628101918996.png)]$

整体框架：

2.2、第一个工程01HelloWorld

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E756BGq8-1593517595481)(C:\Users\游翔\AppData\Roaming\Typora\typora-user-images\image-20200628105751812.png)]$

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF_8">
    <title>01HelloWorld</title>
</head>
<body>

<div id="app"> 
    <input type="text" v-model="username">
    <P>Hello {{ username }}</P>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //创建Vue实例
    const vm = new Vue({//配置对象
       el: '#app',  //element：选择器
        data: {    //数据（model）
            username: 'Hello Vue!'
        }
    })
</script>

</body>
</html>

在html代码中鼠标右键可以看到多了两个打开选择，点击选项即可打开浏览器进行预览

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8HF7xueP-1593517595483)(C:\Users\游翔\AppData\Roaming\Typora\typora-user-images\image-20200628113233318.png)]$

Open in Default Browsers：使用默认浏览器打开快捷键：alt+b

Open in Other Browsers：使用其他浏览器打开快捷键：alt+shift+b

效果图片：

在文本框里操作
在控制台操作（打开浏览器，查看元素里面）

补充：
- Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。
- $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uorCWfHM-1593517595484)(C:\Users\游翔\AppData\Roaming\Typora\typora-user-images\image-20200630101934570.png)]$

3、基本语法

绑定元素属性的2种方法：

<div id="app">
    <P>{{ msg }}</P>
</div>

v-bind（以v开头的称为指令）

<div id="app">
    <P v-bind:title="msg">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </P>
</div>

共同部分

<script>
    //创建vue实例
    const  vm = new Vue({
        el: '#app',//element:选择器
        data: {   //数据(model)
            msg: 'Hello,Vue!'
        }
    });
</script>

效果图
- {{ msg}} (直接查看)
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xfMbAD6A-1593517595486)(C:\Users\游翔\AppData\Roaming\Typora\typora-user-images\image-20200630114258861.png)]$
- v-bind （间接查看）
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vqz2T4IB-1593517595487)(C:\Users\游翔\AppData\Roaming\Typora\typora-user-images\image-20200630114051181.png)]$

判断-循环

v-if (写在开放标签里面)

实现代码

<div id="app">
    <P v-if="msg==='a'">A</P>
    <P v-else-if="msg==='b'">B</P>
    <P v-else>C</P>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script>
    //创建vue实例
    const  vm = new Vue({
        el: '#app',//element:选择器
        data: {   //数据(model)
            msg: 'a'
        }
    })
</script>

效果图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WlAPVzG7-1593517595487)(C:\Users\游翔\AppData\Roaming\Typora\typora-user-images\image-20200630171806404.png)]$

v-for （写在开放标签里面）

实现代码：

<body>
<div id="app">
    <li v-for="item in items">
        {{item.msg}}
    </li>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
    //创建vue实例
    let vm = new Vue({
        el: "#app", //element:选择器
        data: {
            items: [  //[]数组，{}对象
                {msg: 'uxiang'},
                {msg: 'oxiang'},
                {msg: 'uyi'}
            ]
        }
    });
</script>

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yOqKDiOn-1593517595489)(C:\Users\游翔\AppData\Roaming\Typora\typora-user-images\image-20200630181222321.png)]$
补充说明：

item in items :items绑定的data里面的items。指的是从（in）数组items中遍历出每一项item，item.msg是指查看每一项的内容。


如果要显示当前索引，可写成如下：

```html
div id="app">
    <li v-for="(item,index) in items">
      {{item.msg}}-{{index}}
    </li>
</div>

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W0tDWOD3-1593517595489)(C:\Users\游翔\AppData\Roaming\Typora\typora-user-images\image-20200630183637045.png)]$

监听事件

v-on

代码实现：

<div id="app">
    <button v-on:click="sayHi">click me</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
    //创建vue实例
    let vm = new Vue({
        el: "#app" ,//element:选择器
        data: {
            msg: "Welcome to Vue's world!"
        },
        methods: {
            sayHi:function(){
                alert(this.msg);
            }
        }
    });
</script>

效果图：点击button（click me）就会弹出“Welcome to Vue’s world!”

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8HMrs9Mh-1593517595490)(C:\Users\游翔\AppData\Roaming\Typora\typora-user-images\image-20200630192327843.png)]$

补充说明：

methods: //方法必须定义在Vue的Methods对象中，v-on:事件

vue的7个属性（https://blog.csdn.net/chenxuezhong0413/article/details/106593629）

el属性：
用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。

data属性：
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

template属性：
用来设置模板，会替换页面元素，包括占位符。

methods属性：
放置页面中的业务逻辑，js方法一般都放置在methods中

render属性：
创建真正的Virtual Dom

computed属性：
用来计算
Vue.js 计算属性，计算属性在处理一些复杂逻辑时是很有用的

watch属性：
Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化
watch:function(new,old){} 监听data中数据的变化 两个参数，一个返回新值，一个返回旧值。