Vue学习

前端
前端知识
发布日期:   2020-06-03
更新日期:   2020-06-11
文章字数:   2,344
阅读时长:   11 分
阅读次数:  

Jquery简化DOM操作，Angular增进了模块化开发、React提出虚拟DOM技术、Vue是一种渐进式javaScript框架，渐进式就是逐步实现新特性、Axios是前端的通信框架，为了处理DOM元素。

UI框架：

Ant-Design:阿里出品

ElementUI、iview、ice：基于Vue的UI框架

Bootstrap：前端开源框架

AmazeUI：HTML5跨屏前端框架

javaScript构建工具:

Babel:编译工具，主要用于浏览器不支持的ES新特性

WebPack:模块打包器，主要是用于打包、压缩、合并及按序加载

混合开发：

云打包：Hbuild->HBuildX

本地打包:Cordova

微信小程序：

微信UI框架：WeUI

后端技术：

Express:NodeJS框架

NPM：项目综合工具，类似于maven

YARN：NPM的替代方案，类似于Maven和Gradle的关系

前端模式：

MVC：同步通信，Model、view、Controller

MVP：异步通信为主，Model、View、Presenter

MVVM：异步通信，Model、view、ViewModel

第一个VUE程序

Idea安装vue插件：

vue.js插件安装

创建一个html文件，引入vue.js文件

cdn下载获取引入连接

VUE中文文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id = "app">
    {{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <!--model数据层-->
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello,Vue!"
        }
    });
</script>

</body>
</html>

MVVM：Model-View - ViewModel是一种软件的架构设计模式，是一种简化用户界面的事件驱动编程方式。

优点是：

低耦合，视图独立于Model变化和修改，一个ViewModel可以绑定到不同的View上

可复用：将一个视图逻辑放在ViewModel里，多个视图可重用该视图逻辑

独立开发：开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面设计

可测试：测试针对ViewModel进行

简单v-bind:title标签
<body>
<div id = "app">
    <span v-bind:title="message">
        鼠标移动过来会有提示信息！！！
    </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
      el:"#app",
      data:{
          message: "hello"
      }
  });
</script>

</body>
前端的判断、循环
<body>
    <div id="app">
         <!--根据条件显示-->
        <h1 v-if = "type==='A'">成功</h1>
        <h1 v-else-if="type==='B'">失败</h1>
        <h1 v-else>还行</h1>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                type: 'A'
            }
        });
    </script>
</body>
<body>

<div id="app">
    <!--li标签，循环放置数据-->
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            items:[
                {message: "星仔学vue"},
                {message: "星仔学java"},
                {message: "星仔学大数据"}
            ]
        }
    });

</script>
</body>
<!--ol与ul标签
ol显示带有数字
ul显示带有小黑原点
-->
<ol>
     <li v-for="item in items">
         {{item.message}}
    </li>
</ol>
<ul>
    <li v-for="item in items">
         {{item.message}}
    </li>
</ul>

代码样例

Vue的常用属性

1.el属性：用来指示vue编译器从什么位置解析vue语法，一个占位符

2.data属性:用来组织view中抽象出来的属性，将视图数据抽象出来存放到data中

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

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

5.render属性:创建真正的Virtual Dom

6.computed属性 : 用来计算

7.watch属性：监听数据变化 watch:function(new ,old){}

Vue数据双向绑定

vue.js是一个Mvvm框架，即数据双向绑定,双向绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。接受三个参数，要操作的对象、要定义或修改的对象属性名、属性描述符。

 <!--数据双向绑定的小实例-->
<body>
<div id ="app">
    <!--下拉选择框的数据双向绑定-->
    <select v-model="selected">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>

    </select>
    <span>value:{{selected}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                selected: ''
            }
        });

    </script>
</body>

Vue组件

组件是可复用的Vue实例，将原始的html元素屏蔽.对于同一部分使用在多个场景中的代码进行抽取，进行组件的复用，提高代码的复用率

vue自定义组件

需要注意：**命名是名字中间不能产生大写的字母，否则显示不出来

<body>
<div id="app">
    <ol>
        <nnnn v-for="item in groceryList" v-bind:key="item.id" v-bind:todo="item"></nnnn>
    </ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //Vue.component("命名",{})，命名中不能有大小写字母不规范的使用，可以使用小写的段横斜风格：item-name
    Vue.component('nnnn', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })
    var vm = new Vue({
        el:"#app",
        data:{
            groceryList:[
                {id:0,text:'瓜皮'},
                {id:1,text:'憨皮'},
                {id:2,text:'愁皮'}
            ]
        }
    })
</script>
</body>

Axios异步通信

与ajax相比较：Ajax是一个异同网络请求，区别于传统的web开发中采用的同步方式，异步可以使的页面不用刷新也能实现数据的传输，用户体验感较好，但是其频繁地操作Dom元素

axios是基于Promise用于浏览器和nodejs的Http客户端，本质是对XHR的封装。面向新的浏览器旧版本不支持

fetch：前端技术发展的产物，Fetch API提供一个javaScript接口，用于访问和操作HTTP管道的部分。

Vue的生命周期

Vue实例生命周期包含创建、初始化数据、编译模板、挂载DOM、渲染–更新–渲染、卸载等一系列过程。

vue实例的生命周期

vue通过通信获取数据或者使用通信获取数据(json)，并显示

在自己的类路径下创建数据文件

{
  "name": "itxing",
  "url": "balb ",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "韩城",
    "city": "xizhao",
    "country": "china"
    },
  "links": [
    {"name":"itxingzai",
      "url":"http://itxiangzai.xyz"},
    {"name":"itxing",
      "url":"http://itxiangzai.xyz"},
    {"name":"xing",
      "url":"http://itxiangzai.xyz"}
  ]

}

使用流式编程，设置自己的javaScript版本为ES6

<body>
<div id="app" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address.street}}</div>
    <div></div>
    <a v-bind:href="info.url">点击跳转</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        //data方法，用于接受钩子方法的数据
        data(){
            return{
                //请求参数放回的参数需要和json字符串一样
                info:{
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null
                }
            }
        },

        mounted(){//钩子方法 链式编程是ES6的新特性axios.get('../data/data.json').then(response=>(console.log(response.data)));
            axios.get('../data/data.json').then(response=>(this.info = response.data));
        }
    });
</script>
</body>

计算属性

<body>
<div id = "app">
    <p>currentTime1 :{{currentTime1()}}</p>
    <p>currentTime2 :{{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //属性data
        data:{
            message: "Hello itxing"
        },
        methods:{
            currentTime1:function () {
                return Date.now();//返回当前的时间戳
            }
        },
        computed:{
            currentTime2:function () {
                return Date.now();//
            }
        }
    });
</script>
</body>

插槽Slot,自定义组件，便于扩展

<body>
<div id = "app">
   <todo>
       <todo-title slot="todo-title" :title="title"></todo-title>
       <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
   </todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //为了扩展使用插槽的该娘
    Vue.component("todo",{
        template:'<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    });

    Vue.component("todo-title",{
        props: ['title'],
        template:'<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item'],
        template:'<li>{{item}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data:{
            title:"标题",
            todoItems:['java','linux','python']
    }
    });
</script>
</body>
Vue脚手架

Vue-cli项目，前提是自己安装过node.js以及npm，可以切换到阿里的镜像，安装成功后，win+R输入cmd在命令行输入node -v以及npm - v检测自己的环境是否安装成功

1.配置中国镜像源

npm install cnpm -g

或者，每次输入命令

npm install –registry = http: //registry.npm.taobao.org

2.安装脚手架

cnpm install vue-cli -g

测试安装： vue list

创建自己的项目

vue init webpack yourproject

创建vue-cli项目

按照提示进入项目输入：

npm run dev

根据提示的地址就可以访问了。

webpack

npm install webpack -g

npm -install webpack-cli -g

测试:

webpack -v

webpack-cli -v

使用webPack

1.创建一个空目录

2.创建一个modules文件夹，在下面创建一个hello.js文件,将文件使用exports暴露出去

exports.sayHi = function(){
    document.write("<h1>itxing学java</h1>");
};

3.同样目录下创建main.js文件,使用require命令引入之前的文件

var hello = require("./hello");
hello.sayHi();

4.在项目路径下创建webpack.config.js文件名不可以改变,支出打包的文件以及输出的结果位置

module.exports={
    entry:'./modules/main.js',
    output:{
        filename:'./js/bundle.js'
    }
};

5.测试打包的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="dist/js/bundle.js"></script>
</body>
</html>

vue的router路由

1.npm install vue-router –save-dev

2.安装 element-ui -S

3.安装依赖

npm install

4.安装SASS加载器

cnpm install sass-loader node-sass –save-dev

5.启动测试

npm run dev

Npm命令解释

1.npm install moduleName 安装模块到项目目录下

2.npm install -g moduleName ：-g是将模块安装到全局，具体安装到那一个目录和npm config prefix有关

3.npm install -save moduleName : –save的意思是将模块安装到项目目录下，并在package文件的depencies节点写入依赖，-S为该命令的缩写

4.npm install -save-dev moduleName : –save-dev的意思是将模块安装到项目目录下，并在package文件的devDependence节点写入依赖，-D为该命令的缩写

文章作者: it星
文章链接: https://github.com/fengyanxing/2020/06/03/qian-duan-vue-de-xue-xi/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 it星 !
前端
赏
 上一篇
lence lence
it星
索引全文检索： 全文索引时将存储在数据库中的整本书或整篇文章中的任意内容信息查找出来的技术。它可以根据需要获取全文中有关章，节，段，句，词等信息，也可以进行各种统计和分析。 将非结构化数据中的一部分信息提取出来，重新组织，使其变得有一定结
2020-06-09 java工具
java搜索工具
下一篇 
javaWeb基础 (二) javaWeb基础 (二)
web基础一笔记 1.Session、Cookie会话：用户通过浏览器，访问web资源，关闭浏览器，此过程称之为会话。 为什么需要使用会话技术？ 因为Http协议是无状态的，也就是说每个客户访问服务器端资源时，服务器并不知道该客户端是谁，
2020-05-31 javaWeb
javaWeb
  目录