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. ubuntu connect to windows folder share

    在windows上给远程登录的用户设置一个账号密码.”右击计算机图标“——"管理”——“本地用户和组”——“用户”.然后右击选择“新用户”,输入账号密码,并勾选“密码永不过期”,这样,在远程 ...

  2. php-cgi占用太多cpu资源而导致服务器响应过慢

    服务器环境:redhat linux 5.5 , nginx ,  phpfastcgi 在此环境下,一般php-cgi运行是非常稳定的,但也遇到过php-cgi占用太多cpu资源而导致服务器响应过慢 ...

  3. C#单元测试，带你快速入门

    注:本文示例环境 VS2017 XUnit 2.2.0 单元测试框架 xunit.runner.visualstudio 2.2.0 测试运行工具 Moq 4.7.10 模拟框架 为什么要编写单元测试 ...

  4. Vue 学习笔记 — filter

    简书 对将要插入html的对象进行处理 一个简单的Vue示例 基本过滤器用法 带参数的过滤器 全局过滤器 (这张图片有点问题,最后显示的应该是 hello world不是null) 过滤器的简单应用 ...

  5. [Swift]LeetCode494. 目标和 | Target Sum

    You are given a list of non-negative integers, a1, a2, ..., an, and a target, S. Now you have 2 symb ...

  6. [Swift]LeetCode617. 合并二叉树 | Merge Two Binary Trees

    Given two binary trees and imagine that when you put one of them to cover the other, some nodes of t ...

  7. [Swift]LeetCode846. 一手顺子 | Hand of Straights

    Alice has a hand of cards, given as an array of integers. Now she wants to rearrange the cards into ...

  8. pycharm（Python编辑器）的激活

    1.将“0.0.0.0 account.jetbrains.com”中的内容添加到hosts文件中,hosts路径为:C:\Windows\System32\drivers\etc mac用户的hos ...

  9. Volatile的那些事

    上一篇中,我们了解了Synchronized关键字,知道了它的基本使用方法,它的同步特性,知道了它与Java内存模型的关系,也明白了Synchronized可以保证"原子性",&q ...

  10. 剖析项目多个logback配置(上)

    来源:http://www.cnblogs.com/guozp/p/5949744.html 以下两个是我在使用slf4j + logback时候日志提示的问题,问题不大,都是WARN,并不真正影响运 ...