美文网首页
Vue

Vue

作者: 西谷haul | 来源:发表于2020-06-08 12:53 被阅读0次

前言：Vue.js的优点

体积小：压缩后只有33k；
更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM；
双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；
生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；对初学者友好、入门容易、学习资料多；

随着前端技术的不断发展，前端开发能够处理的业务越来越多，网页也变得越来越强大和动态化，这些进步都离不开JavaScript。在目前的开发中，已经把很多服务端的代码放到了浏览器中来执行，这就产生了成千上万行的JavaScript代码，他们连接着各式各样的HTML和CSS文件，但是缺乏正规的组织形式。这也是为什么越来越多的前端开发者使用JavaScript框架的原因，目前比较流行的前端框架有Angular、Reac、Vue等。

Vue是一款友好的、多用途且高性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架，也就是说，如果你已经有了现成的服务端应用，你可以将Vue作为该应用的一部分嵌入其中，带来更加丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现，那么Vue的核心库及其生态系统也可以满足你的各式需求。和其他框架一样，Vue允许你将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方。如果我们构建了一个大型的应用，可能需要将东西分割成为各自的组件和文件，使用Vue的命令行工具，使快速初始化一个真实的工程变得非常简单。

一、VUE介绍HelloWord

1、首先在VScode新建一个文件夹

2、引入VUE（就像后端引入一个框架的jar包一样）

参考官网https://cn.vuejs.org/v2/guide/installation.html#NPM
①npm引入

#首选在控制台执行
npm init -y
#然后
npm install vue

然后新建一个index.html，在页面输入！回车就可以自动生成如下页面

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    //此处不是自动生成，而是自己引入vue
    <script src="./node_modules/vue/dist/vue.js"></script>
</body>

</html>

②也可以使用script引入如下

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<div id="app">
    <input type="text" v-model="num">
    <button v-on:click="num++">点赞</button>
    <button v-on:click="cancle">取消</button>
    <h1>{{name}}很帅，有{{num}}个人为他点赞</h1>
</div>

<body>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app", //绑定元素
            data: { //封装数据
                name: "我",
                num: 1
            },
            //声明方法
            methods: {
                cancle() {
                    this.num--
                }
            },
        })
    </script>
</body>

</html>

二、VUE指令

1、v-html和v-text：v-text不会进行编译，v-html会进行编译

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<div id="app">
    {{msg}}
    <spon v-html="msg"></spon>
    <spon v-text="msg"></spon>

</div>

<body>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "<h1>Hello</h1>"
            }
        })
    </script>
</body>

</html>

2、v-bind和v-model

{{}}只能在标签外，二v-bind可以在标签内，以下是利用v-bind绑定链接，利用v-bind来绑定颜色，字体大小等等，v-bind是单向绑定的
v-model则是双向绑定，一般用于表单或者是自定义提交项

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <a v-bind:href="link">gogogo</a>
        <span v-bind:class="{active:isActive,'text-danger':hasError}" v-bind:style="{color:color1,fontSize:size}">你好</span>

    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            isActive: "true",
            hasError: "true",
            link: "http:www.baidu.com",
            color1: "red",
            size: "50px"
        },
    })
</script>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h4>精通的语言</h4>
        <input type="checkbox" value="java" v-model="language">java<br>
        <input type="checkbox" value="c++" v-model="language">c++<br>
        <input type="checkbox" value="python" v-model="language">python<br> 选中了{{language.join(",")}}
    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            language: [],
        },
    })
</script>

</html>

3、v-on

v-on可以绑定单击事件v-on:click=""，简写就是@click，@就相当于v-on:

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

<script src="./node_modules/vue/dist/vue.js"></script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="num" @click="num=10" @keyup.up="num+=2" @keyup.down="num-=2">
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            num: 1
        },
    })
</script>

</html>

4、v-for

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(user,index) in users">
                {{index}} ==>> {{user.name}}<br>
                <span v-for="(v,k,i) in user">
                    {{i}} ==>> {{k}} ==>> {{v}}<br>
                </span>
            </li>
        </ul>

    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "马云",
                age: "59"
            }, {
                name: "胡歌",
                age: "39"
            }, ]
        }
    })
</script>

</html>

5、v-if、v-show页面效果是一样的，区别在于一个是通过样式来将他隐藏，一个是直接没有这段代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" @click="show=!show" value="切换是否显示">
        <h1 v-if="show">if</h1>
        <h1 v-show="show">if</h1>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            show: true
        },
    })
</script>
</html>

6、计算属性和侦听器

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


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li>西游记,价格：{{xprice}}，数量：<input type="text" v-model="xnum" @click="xnum++"></li>
            <li>水浒传,价格：{{yprice}}，数量：<input type="text" v-model="ynum"></li>
            <!-- <li>totalprice:{{xprice*xnum+yprice*ynum}}</li> -->
            <li>totalprice:{{totalprice}}</li>
            <li>{{msg}}</li>
        </ul>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            xprice: 10,
            yprice: 20,
            xnum: 1,
            ynum: 2,
            msg: ""
        },
        //计算属性
        computed: {
            totalprice() {
                return this.xprice * this.xnum + this.yprice * this.ynum;
            }
        },
        //侦听器
        watch: {
            xnum: function(newVal, oldVal) {
                if (newVal >= 3) {
                    this.msg = "库存超出限制"; //将msg的值改变
                    this.xnum = 3; //将xnum设置为最大值
                } else {
                    this.msg = "";
                }
            }
        },
    })
</script>
</html>

7、过滤器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} -->> {{user.name}} -->> {{user.gender==1?"男":"女"}}-->>
                <br> {{user.id}} -->> {{user.name}} -->> {{user.gender| gFilter}}-->>
            </li>
        </ul>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    Vue.filter("gFilter", function(val) {
        if (val == 1) {
            return "男的";
        } else {
            return "女的";
        }
    })
    let vm = new Vue({
        el: "#app",
        data: {
            userList: [{
                id: 1,
                name: "jack",
                gender: 1
            }, {
                id: 2,
                name: "tom",
                gender: 2
            }, ]
        },
    })
</script>

</html>

8、组件化

①组件其实就是一个vue实例，因此定义时也会接收data，methods等
②组件不会与页面的元素绑定，否则就无法复用，因此没有el属性
③但是组件渲染需要html模板，所以增加了template属性，值就是html属性
④全局组件定义完毕，任何vue实例都可以直接在html中通过组件名称来使用组件了
⑤data必须是一个函数，不再是一个对象

全局和局部组件如下演示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="count++">我被点击了{{count}}次</button>
        <counter></counter>
        <button-counter></button-counter>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    //全局声明一个组件
    Vue.component("counter", {
        template: '<button @click="count++">我被点击了{{count}}次!!!</button>',
        data() {
            return {
                count: 1
            }
        }
    });
    //局部声明组件
    const buttonCounter = {
        template: '<button @click="count++">我被点击了{{count}}次啊啊</button>',
        data() {
            return {
                count: 1
            }
        }
    };
    new Vue({
        el: "#app",
        data: {
            count: 1
        },
        components: {
            'button-counter': buttonCounter
        }
    })
</script>

</html>

三、VUE模块开发

1、开发准备

①全局安装webpack

npm install webpack -g

②全局安装vue脚手架

npm install -g @vue/cli-init

③初始化vue项目

#vue脚手架使用模板初始化一个appname项目
vue init webpack appname

④启动vue项目

#项目中有package.json中有scripts，代表我们能运行的命令
#npm start运行命令 
npm run dev

2、VUE每个文件干啥的

webpack生成vue目录结构
1、build是存放打包工具webpack有关的代码
2、config是一些配置信息
3、node_modules是当前项目里的所有依赖，也就是npm install安装进来的
4、src是平常用到的功能文件夹，一般都会在src里面操作
5、static存放一些静态资源图片字体之类
6、剩下的也是一些配置文件，比如说babelrc是语法转移的相关工具
7、index.html是首页内容
8、package-lock.json是npm依赖包的一些信息，会将每一个依赖的详细信息列出来
9、最后，我们开发一般专心用src就可以了

3、项目运行流程：

主入口是index.html，main.js的Vue实例就挂在了index.html上

index.html main.js 在vue里面的路由

如上就相当于导入了main.js同级目录router文件夹下的内容，其中包含index.js，如图index中export导出了一个组件，在main.js中就导入了这个组件，并且自己起了个名字router

index.js app.vue

如上导入了组件vue，最后还有一个模板渲染组件template也就是App组件，组件主要分为以下三部分，以后多模块开发也会分为这三个组件来开发。

.vue组件的三部分 App.vue详细结构

如上模板template具体分为两个部分，上面是一个<img>，下面<router-view/>路由视图，要根据下面的访问路径具体决定。也就是根据index.js中的路由规则决定的。所以如下访问“/”就是访问组件HelloWord也就是HelloWord.vue

image.png

四、vue的生命周期

https://blog.csdn.net/haochangdi123/article/details/78358895

四、Element——Vue的组件库

1、安装

参考官网：https://element.eleme.cn/#/zh-CN/component/quickstart

#推荐使用
npm i element-ui -S

#安装element-ui和样式组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

这样ElementUI组件就导入进来了

相关文章

网友评论

      本文标题：Vue

      本文链接：https://www.haomeiwen.com/subject/jdhizhtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Vue|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！