vue入门

vue 入门1、概述vue官网https://cn.vuejs.org/只关心视图层 : 遵循 SOC（关注点分离原则）原则给用户看，刷新后台给到的数据网络通讯 http://axios-js.com/页面跳转： vue-router状态管理： vuexvue-UI: Element、飞冰css预处理器：SASS：基于Ruby，通过服务端处理LESS：基于NodeJS，通过客户端处理，使用简单

张邵

7908人浏览 · 2021-08-12 17:11:02

张邵 · 2021-08-12 17:11:02 发布

vue 入门

1、概述

vue官网https://cn.vuejs.org/
只关心视图层 : 遵循 SOC（关注点分离原则）原则 给用户看，刷新后台给到的数据

网络通讯 http://axios-js.com/
页面跳转： vue-router
状态管理： vuex
vue-UI: Element、飞冰

css预处理器：
SASS：基于Ruby，通过服务端处理
LESS：基于NodeJS，通过客户端处理，使用简单 http://lesscss.cn/

let --> var
webpack 打包工具，将ES6的代码编异成ES5的代码

MVC
View : JSP {{}}
DATA:
VM: 相当于controller

MVVM：数据双向绑定
虚拟DOM vue 的计算属性

前端UI框架
Ant-Design: React
Element、iview、ice： vue
Bootstrap:
AmazeUI

JavaScript 构建工具
WebPack : 模块打包器，打包，压缩，合并，按序加载
Babel: JS编译工具，

三端统一开发
云打包： HBuild --> HBuildX API Cloud
本地打包： Cordova(以前是PhoneGap)

后端技术
Express: NodeJS
Koa: Express
NPM: Maven
YARN: NPM 替代方案

2、入门程序

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<!--view层-->
	<div id="app">
		<!--数据绑定-->
	    {{message}}
	</div>
	
<!--导入vue.js cdn-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
	/*view层*/
	//vue 视图 对象
    var vm = new Vue({
       el: "#app",
        //Model: 数据
       data: {
           message: "hello vue!"
       }
    });
</script>
</body>
</html>

在控制台中vm.message="hello view model"数据的双向绑定
在这里插入图片描述

3、指令

v-bind: 简写为 :

    <span v-bind:title="message">
        提示
    </span>
        data: {
            message: "hello,vue!"
            }

判断循环

v-if v-else

<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>

<script>
  var vm = new Vue({
      el: "#app",
      data: {
          ok: true
      }
  });
 </script>

v-if v-else-if


    <h1 v-if="type === 'A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
    
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            type: "A",
        }
    });
</script>

v-for

    <li v-for="item in items">
       {{item.message}}
    </li>
<script>
       data: {
           items: [
               {message: 'zs'},
               {message: "1234"}
           ]
       }
</script>

事件

查看事件https://www.jquery123.com/
v-on: 简写为 @:

    <!--绑定点击事件-->
    <button v-on:click="sayHi"> Click Me</button>

<script>
        el: "#app",
        data: {},
        methods: {
        //方法必须定义在methods中
          sayHi: function (event){
              alert(this.message);
          }
        }
</script>

学习vue我们必须之到它的7个属性，8个方法，以及7个指令。787原则

v-model
在这里插入图片描述

    <!--数据双向绑定-->
    输入的文本： <input type="text" v-model="message"> {{message}}
    <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>						{{message}}
        性别：
    <input type="radio" name="sex" value="男" v-model="zs" v-model="checked"> 男
    <input type="radio" name="sex" value="女" v-model="zs"> 女
    <p>选中了： {{zs}}</p>

<script>
        data: {
            message: "hello,vue!",
            zs: '',
            checked = 'false'
        },
</script>

在这里插入图片描述

<div id="app">
	<!--组件的使用-->
    <zs v-for="item in items" v-bind:zs="item"></zs>
</div>

<script>
    //组件定义
    Vue.component("zs",{
        props: ['zs'],
        template: '<li>{{zs}}</li>'
    })
    var vm = new Vue({
        el: "#app",
        data: {
            items: ["java","linux","javascript"]
        }
    });
</script>

网络通讯

http://axios-js.com/docs/vue-axios.html

解决闪烁问题
<style>
    [v-clock] {
        display: none;
    }
</style>
    
<div id="app">
    <div id="vue" v-clock>
        <div>{{info.name}}</div>
        <div>{{info.url}}</div>
        <a v-bind:href="info.url">点我</a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                info: {
                    name: null,
                    url: null
                }
            }
        },
        //钩子函数
        mounted() {
            axios.get('data.json').then(response => (this.info = response.data));
        }
    });
</script>

{
  "name": "狂神说java",
  "url": "http://baidu.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": 4399,
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

计算属性

<!--view层-->
<div id="app">
   <p>1 -- {{currentTime1()}}</p>
   <p>1 -- {{currentTime2}}</p>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello,vue!"
        },
        methods: {
            currentTime1: function (event){
                return Date.now();
            }
        },
        //计算属性： 如果计算属性中的方法是固定的，就会从缓存中获取
        computed: {
            currentTime2: function (){
                return Date.now();
            }
        }
    });
</script>

slot 插槽


<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>
	//定义一个代办组件，留有插槽
    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: ['a','b','c']
        }
    });
</script>

组件vm对象中的数据

组件中无法直接绑定vm对象中的方法
组件只能绑定当前组件的方法
在这里插入图片描述

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <!--自定义事件： 组件自定义remove事件 调用vm对象中的删除方法-->
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" :index="index" @remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
	//代办组件
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                    </div>'
    });
    //todo 标题
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    //todo 列表
    Vue.component("todo-items",{
        props: ['item','index'],
        template: '<li>{{index}}=={{item}} <button @click="remove">删除</button></li>',
       //当前组件的方法
        methods: {
            remove: function (index){
            	//自定义事件分发
                this.$emit('remove',index);
            }
        }
    });


    var vm = new Vue({
        el: "#app",
        data:{
            title: "我是张邵",
            todoItems: ['a','b','c']
        },
        methods: {
            removeItems: function (index){
                console.log("删除了" +  this.todoItems[index] + "OK");
                this.todoItems.splice(index,1);
            }
        }
    });
</script>

在这里插入图片描述

第一个Vue-cli程序

环境
Node.js https://nodejs.org/en/download/
Git

# -g 就是全局安装
npm install cnpm -g

# 或使用
npm install --registry=https://registry.npm.taobao.org


# 安装 vue-cli
cnpm install vue-cli -g
# 测试安装是否成功
vue list

使用vue-cli创建一个Vue项目
vue init webpack myvue

package.json类似于pom文件

npm run dev 启动项目

webpack的使用

安装
npm install webpack -g
npm install webpack-cli -g

测试
webpack -v
webpack-cli -v
使用
npm run build

webpack #执行webpack.config.js文件

在这里插入图片描述

vue-router

npm install vue-router --save-dev

在这里插入图片描述

Vue-element demo

在这里插入图片描述

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport