美文网首页
2019-12-02Vue在java项目中的使用——Vue基础(

2019-12-02Vue在java项目中的使用——Vue基础(

作者: zz云飞扬 | 来源:发表于2019-12-02 10:23 被阅读0次

本文原文链接:https://blog.csdn.net/Jack__iT/article/details/88213177

什么是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库)

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

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>

<div id="root">{{msg}}</div>

<script>

new Vue(

{

el: "#root",

data:{

msg:"vue Demo"

}

}

)

</script>

</body>

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

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

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

<body>

<div id="root"></div>

<div v-text="msg"></div>

<script>

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>

    <!--在{{}}中可使用js表达式语法-->

    <p>age2:{{age}}</p>

    <p>template{{template}}</p>

    <!--调用模板显示HTML结构-->

    <p v-html="template"></p>

    <!--调用末班显示html内容-->

    <p><a v-blind: href="url">百度的超链接</a></p>

    <!--将超链接作为变量,可用:代替v-blind:-->

    <p><a :href="url">百度的超链接</a></p>

    <button type="button" v-on:click="submit()">年龄增长</button>

    <button type="button" @click="submit()">年龄增长</button>

    <!--调用函数的两种方法,可用@代替v-on:-->

</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

相关文章

网友评论

      本文标题:2019-12-02Vue在java项目中的使用——Vue基础(

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