什么是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工程项目的方式

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

    预设:包管理器 npm

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

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

启动项目:

npm run serve

Logo

前往低代码交流专区

更多推荐