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. Eclipse极致性能调优

    直接复制以下到eclipse.ini里面 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 -Xverify:n ...

  2. Python爬虫6-利用ProxyHandler设置代理服务器

    GitHub代码练习地址:https://github.com/Neo-ML/PythonPractice/blob/master/SpiderPrac09_ProxyHandler.pyProxyH ...

  3. Eclipse格式化整个项目

    Eclipse有一个非常好的功能,就是把源代码进行美化(或者是标准化),在打开的Java源代码中,Ctrl+Shift+F就可做到. 但是,如果你想把整个项目中的源代码都美化一下呢?这里有一个简单的办 ...

  4. [Swift]LeetCode639. 解码方法 2 | Decode Ways II

    A message containing letters from A-Z is being encoded to numbers using the following mapping way: ' ...

  5. Java运行原理及内存分析

    Java运行原理及内存分析 一.Java运行原理 二.Java内存分析

  6. node开发备注

    设置环境变量 // 命令行启动: "scripts": { "start": "export NODE_ENV=dev && node ...

  7. 『骑士精神 IDA*』

    骑士精神(SCOI2005) Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑 士的走法(它可以走到和它横坐标相差为1,纵 ...

  8. asp.net core系列 25 EF模型配置(隐藏属性)

    一. 隐藏属性概述 隐藏属性也叫影子属性,该属性不是在.net实体类中定义的属性,而是在EFCore模型中为该实体类型定义的属性.这些属性的值和状态完全在变更跟踪器中维护.它有二个功能:(1)当数据库 ...

  9. Android--加载大分辨率图片到内存

    前言 在使用ImageView显示图片的时候,直接加载一个图片资源到内存中,经常会出现内存溢出的错误,这是因为有些图片的分辨率比较高,把它直接加载到内存中之后,会导致堆内存溢出的问题.这篇博客就来讲解 ...

  10. dotnet core使用IO合并技巧轻松实现千万级消息推送

    之前讲述过多路复用实现单服百万级别RPS吞吐,但在文中有一点是没有说的就是消息IO合并,如果缺少了消息IO合并即使怎样多路复用也很难达到百万级别的请求响毕竟所有应用层面的网络IO读写都是非常损耗性能的 ...