Vue在java项目中的使用——Vue基础

什么是MVVM框架？View---ViewModel---Model之间的通讯View:视图，domViewModel：通讯，观察者，能监听到数据的变化Model：数据，JavaScript对象常用的MVVM框架有angular.js、react.js、vue.jsMVVM的应用场景：复杂交互逻辑的前端应用提供基础的架构抽象通过Ajax数据持久化，保证前端用户体...

codenow.fun

18121人浏览 · 2019-03-05 23:41:22

codenow.fun · 2019-03-05 23:41:22 发布

什么是MVVM框架？

View---ViewModel---Model之间的通讯

View:视图，dom

ViewModel：通讯，观察者，能监听到数据的变化

Model：数据，JavaScript对象

常用的MVVM框架有angular.js、react.js、vue.js

MVVM的应用场景：

复杂交互逻辑的前端应用

提供基础的架构抽象

通过Ajax数据持久化，保证前端用户体验

什么是vue.js (核心是：数据驱动+组件化的前端开发)

数据驱动：实现数据的双向绑定，数据改变驱动视图自动更新

组件化设计原则：页面上每个独立的可视/可交互区域视为一个组件，每个组件对应一个工程目录，组件所需要的各种资源在这个目录下的就进维护，页面就成了组件的容器，它由组件来组成

Vue.js 是一套构建用户界面的渐进式框架。使用MVVM架构，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。目标是通过尽可能简单的 API 实现响应式的数据绑定和组合的视图组件，响应式修改dom元素。

使用Vue，您可以快速编写应用程序并直接从浏览器运行应用程序，或者如果需要，可以使用ES6，JSX，组件，路由，捆绑等构建复杂的应用程序。

它可以处理您可能想要使用它的许多不同方式。它也非常灵活，可以适应不同的编写代码的方式，例如，可以使用HTML或Javascript编写模板，也可以使用JSX。可以不触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

Vue.js、Angular.js和React.js的区别

Vue.js更小更轻量、更易上手、学习快借鉴了angular.js的指令和react的组件化，react有自己的js语法、Angular是java工程师写的，最难

安装

Vue.js在项目中的引入方式

直接引入js库（可以是CDN在线仓库中的vue.js，也可以是自行下载的vue.js库）

NPM方式安装

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件

在cmd中直接使用npm来安装的一些工具的话会比较慢，所以我们使用淘宝的npm镜像：输入npm i -g cnpm --registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了，如果权限不够，请使用管理员运行命令提示符

调试工具：

Chrome浏览器，安装vue插件

使用

基础知识+TodoList+Vue-cli

简单直接的dom操作

<body>

new Vue(

{

el: "#root",

data:{

msg:"vue Demo"

}

)

</script>

</body>

挂载点、模板与实例的关系

挂载点：即Vue对象绑定的元素、需要进行操作的元素，Vue只会对挂载点下的内容进行处理。与vue对象的el属性对应

模板：挂载点内的内容，vue自动结合模板和数据生成内容，然后把内容放在挂载点中

<body>

new Vue(

{

el: "#root",

template: '<h4>这也是模板内容 {{msg}}</h4>',

data:{

msg:"<h5>vue Demo text</h5>"

}

)

</script>

</body>

实例：所创建的vue实例

数据、事件和方法

数值

插值表达式{{vaule_name}}

v-text和v-html:

Vue-cli：

它是vue的脚手架工具

安装：

安装node.js环境

node -v 查看node.js版本

安装vue-cli:

Windows下：npm install -g vue-cli

Mac下：sudo npm install -g vue-cli

常用的vue命令:

vue 命令：

vue list 命令：查看列出可以用哪些模板

vue -V 查看版本

C:\Users\Administrator>vue list

Available official templates:

★ browserify - A full-featured Browserify + vueify setup with hot-reload, li

nting & unit testing.

★ browserify-simple - A simple Browserify + vueify setup for quick prototypi

ng.

★ pwa - PWA template for vue-cli based on the webpack template

★ simple - The simplest possible Vue setup in a single HTML file

★ webpack - A full-featured Webpack + vue-loader setup with hot reload, lint

ing, testing & css extraction.

★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping

安装要使用的模板：

vue init webpack sell

项目名称，项目描述、作者、单元测试

安装完成后，Windows下dir可查看当前目录下文件

进入项目目录，

npm install

npm run dev 运行项目

vue项目的构成和原理

webpack

模板语法：

{{}}里面可以包含表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
    <style>
        .bg{
            color: red;
        }
    </style>
</head>
<body>
<div id="div1">
    <p>username:{{username}}</p>
   
    <p>password:{{password}}</p>
    <p>age:{{age*2+5}}</p>
    
    <p>age2:{{age}}</p>
    <p>template{{template}}</p>
    
    <p v-html="template"></p>
    
    <p><a v-blind: href="url">百度的超链接</a></p>
    
    <p><a :href="url">百度的超链接</a></p>
    <button type="button" v-on:click="submit()">年龄增长</button>
    <button type="button" @click="submit()">年龄增长</button>
    
</div>
<h5 class="bg">Hello World！！{{msg}}</h5>
<script>
    new Vue(
        {
            el: '.bg',
            data: {
                msg: 'hello vue!!',
                username: "zhang"
            }
        }
    );
    new Vue({
        el: '#div1',
        data: {
            username: 'lisi',
            password: '123',
            age: 23,
            template: '<div>this is a template!</div>',
            url: ' http://baidu.com'
        },
        methods: {
            submit: function () {
                this.age++
            }
        }
    })
</script>
</body>
</html>

计算属性与侦听器

计算属性computed：适合于数据联动，可监听多个变量，但是监听的变量需要在实例里面

监听器 watch：适合于异步场景，监听一个变量或常量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
  <div id="app">
      {{msg}}
      <p>{{msg1}}</p>
  </div>
<script>
    var app=new Vue({
        el: '#app',
        data: {
            msg: 'vue project',
            another: "another msg"
        },
        watch:{
            msg:function (newval,oldval) {
                console.log('newval:'+newval);
                console.log('oldval:'+oldval)
            }
        },
        computed: {
            msg1: function () {
                return 'computed:'+this.msg+' , '+this.another
            }
        }
    })
</script>
</body>
</html>

条件渲染、列表渲染、class和Style

v-if,v-else,v-else-if,和v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="count<8">判断1：cout小于8,它的值是：<span>{{count}}</span></div>
        <div v-else-if="count>=8&&count<10">判断2：count大于等于8且小于10啦：值为：{{count}}</div>
        <div v-else>判断3：其他都不满足了，它的值是：<span>{{count}}</span></div>
        <button type="button" @click="submit()">计数器</button>
    </div>
    <script>
       var app= new Vue({
            el: '#app',
            data: {
                msg: 'vue demo3!',
                count: 5
            },
            methods:{
                submit:function () {
                    this.count++;
                }
            }
        });
    </script>
</body>
</html>

v-for 列表渲染

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div v-for="item in list">
            <p v-if="item.age>20">大于20，姓名：{{item.name}}，年龄：{{item.age}}</p>
            <p v-if="item.age<=20">小于或等于20，姓名：{{item.name}},年龄：{{item.age}}</p>
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                msg:'vue demo 4',
                list: [
                    {name: 'zhang',age: 24},
                    {name:'huang',age:20},
                    {name:'luo',age:23},
                    {name:'chen',age:18}
                ]
            }
        })
    </script>
</body>

style的绑定

<body>
    <div id="app">
        <div v-bind:style="mystyle">{{msg}}</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data:{
                msg: 'this is vue demo4',
                mystyle:{
                    color: 'red',
                    textShadow: '0 0 5px green'
                }
            }
        })
    </script>
</body>

vue-cli

C:\Users\Administrator>f:

F:\>cd /vueFiles

F:\vueFiles>vue create vue-project-190201

vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.

You may want to run the following to upgrade to Vue CLI 3:

npm uninstall -g vue-cli

npm install -g @vue/cli

F:\vueFiles>

vue的文件结构： template、script、style

模板语法：包含插值、指令（指令缩写）；

创建vue-cli工程项目的方式

进入要创建项目的目录，使用vue create 工程名的命令创建
使用vue ui命令，然后打开浏览器UI界面创建项目

预设：包管理器 npm

功能：路由组件：Router 状态管理组件vuex 还有css的预编译组件CSS Pre-processors 使用配置文件勾选使用

配置：预编译器：Sass/SCSS ，ESLint的配置文件为默认的标准的配置文件：ESLint+Standard config

启动项目：

npm run serve

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^