mvc

model view controller

mvvm

m=>model v=>view 双向数据绑定

数据在视图呈现:在表单里用v-model,在表单外用{{}},也可以用v-text

el:".app" 也可以写成 .$mount('.app')

<body>
   <div class="app">
       <input type="text" v-model="one">+<input type="text" v-model="two">=<span>{{one*1+two*1}}</span><span v-text="one"></span>
   </div>
</body>
</html>
<script>
    new Vue({             //启动vue
        el:".app",      //element,锁定vue作用的范围
        data:{          //指定数据,json格式
            one:0,
            two:0
        },
        watch:{         //手动监控某一数据的变化
            con(one){
                if(one){
                    this.message=""
                }
            }
        },
        methods:{              //操作逻辑,放的是方法
            result1(){
                console.log("result1")
                if(this.one>10){
                    return this.one*1-this.two*1
                }else{
                    return this.one*1+this.two*1
                }
            }
        },
        computed:({           //动态的数据
            result2(){
                console.log("result2")
                if(this.one>10){
                    return this.one*1+this.two*1
                }else{
                    return this.one*1-this.two*1
                }
            }
        })
    })
</script>

指令

{{}}

模板引擎

<span>{{msg}}</span>

v-text

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-html

更新元素的内容

v-model

完成双向数据绑定 (只能用在表单)

<input type="text" id="text" v-model="con" @keydown.13="add">

v-for

模板中循环

<tr v-for="item in values">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.sex}}</td>
    <td>{{item.age}}</td>
</tr>

v-if v-else

模板中的判断

<div v-if="flag==true"></div>
<div v-else></div>

v-show

根据表达式之真假值，切换元素的 display CSS 属性。

<div v-show="datas.length==0">没有内容</div>

v-on: => @

<input type="text" id="text" v-model="con" @keydown.13="add">

v-bind => :

<button type="button" class="btn btn-info" @click="changefn('all')" :style="{color:(changestate=='all'?'red':'#fff')}">全部</button>

组件化开发

一个组件里应该有完整的数据,完整的逻辑,完整的结构

<body>
    <div class="box">
        <car :datas="[{con:1},{con:2},{con:3}]"></car>
    </div>
</body>
</html>
<script>
    Vue.component("car",{
        props:["datas"],
        "template":`
            <ul>
                <li v-for="item in datas">{{item.con}}</li>
            </ul>
        `
        // data:function () {
        //     return{
        //         datas:[{con:1},{con:2},{con:3},{con:4}]
        //     }
        // }
    })
    new Vue({
        el:".box",
    })
</script>

构建vue2.0目录

vue -V 查看vue的版本 (热加载)

sudo npm install -g vue-cli 下载

vue init webpack aaaa 创建 vue基于webpack

y n n n y

src .vue就是一个完整的组件

cd aaaa

npm run serve

sudo npm uninstall -g vue-cli 卸载

构建vue3.0目录

sudo npm install -g @vue/cli 安装

vue create bbbb

手动创建

必选的:babel,Vuex,route

y n

cd bbbb

npm run serve

vue路由

  1. 引入vue.js vue-route.js

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

  2. 组件的制作

    const Foo=Vue.component("Foo",{
            template: `
                <div @click="change">{{con}}</div>
            `,
            data:function () {
                return{
                    con:"ljhblkbkjkj"
                }
            },
            methods:{
                change(){
                    this.con="123654788"
                }
            }
        })
    const Bar = { template: '<div>bar</div>' }

  3. 建立路由

    const router = new VueRouter({
          routes:[
          { path: '/foo', component: Foo },
          { path: '/bar', component: Bar }
        ]

  4. 声明vue 把路由放进vue中

    const app = new Vue({
        el:"#app",
        router:router
    })

开发

一、逻辑在服务器上

  1. 优点：首页加载速度快，业务逻辑清晰，工作量少

  2. 缺点：用户体验差，服务器压力大，不利于协同工作

二、逻辑在前端（ajax）

  1. 优点：用户体验佳，流畅，减轻服务器压力，有利于协同工作

  2. 缺点：首页加载慢，业务逻辑不清晰，工作量大

Vue的使用的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  6. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  7. 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  8. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. 初探Vue

    Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...

随机推荐

  1. grunt 插件

    一个简单的 grunt 插件, 作用是 把 css 文件中的  /images/  替换成指定的  url path, 以实现 图片 cdn 路劲改造 插件项目文件结构 grunt-contrib-s ...

  2. HBuilder git使用-建立仓库，邀请用户

    1.git环境配置好后,在Github上注册好帐号 2. 创建一个Respository(代码仓库) 3.邀请其他小组用户(必须的,要不别人提交不了修改) 4.把邀请链接要COPY给其他用户 5. 其 ...

  3. mysql 主从设置

    方法: 1.主服务器建立二进制日志,每产生语句或磁盘变化,写进日志 2.从服务器建立 relaylog日志 3.主服务器授权复制账号 4.从服务器利用复制账号来监听主服务器的日志 5.注意:所以的my ...

  4. 【MyBatis源码分析】环境准备

    前言 之前一段时间写了[Spring源码分析]系列的文章,感觉对Spring的原理及使用各方面都掌握了不少,趁热打铁,开始下一个系列的文章[MyBatis源码分析],在[MyBatis源码分析]文章的 ...

  5. Javascript高级编程学习笔记（90）—— Canvas(7) 绘制图像

    绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...

  6. [Swift]LeetCode719. 找出第 k 小的距离对 | Find K-th Smallest Pair Distance

    Given an integer array, return the k-th smallest distance among all the pairs. The distance of a pai ...

  7. MySQL数据库导入或者同步大量数据时数据丢失解决方案

    相信大家都经常遇到这样的情况,我们在编码的过程中经常需要在调试代码的时候切换到本地的数据库上做修改调试,如果当测试数据库的数据在几十万或者上百万数据的时候,我们无论是通过恢复备份/导入SQL的方式来把 ...

  8. java中 try catch finally和return联合使用时，代码执行顺序的小细节

    代码1测试 public static void main(String[] args) { aa(); } static int aa() { try { int a=4/0; } catch (E ...

  9. 10.Git分支-分支管理（git branch命令）、分支开发工作流

    1.分支管理  git branch 不仅可以创建和删除分支,还可以做一些其他工作. 1.不带参数的 git branch ,得到本地仓库当前的分支列表.并且会显示,当期所在的分支,也就是HEAD所指 ...

  10. java程序员的NodeJS初识篇

    摘要 作为一个一直用java来写后端的程序员用NodeJS来写后台,实在不是很爽.这里记下这两个月的NodeJS学习所遇之坑,与java转NodeJS的同仁共勉.学习时间不长,若有理解错误,望指正. ...