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. Lesson 27 A wet night

    Text Late in the afternoon, the boys put up their tent in the middle of a feild. As soon as this was ...

  2. [安卓] 20、基于蓝牙BLE的广播包高频快速搜索

    前言: 之前介绍过很多蓝牙beacon.搜索.连接.通讯的文章.不过最近我发现:之前写的蓝牙广播包搜索的工程,搜索频率太慢,而且不能一直保持搜索状态.因此,这里探讨下高频蓝牙广播包扫描 -- 蓝牙BL ...

  3. [Swift]LeetCode72. 编辑距离 | Edit Distance

    Given two words word1 and word2, find the minimum number of operations required to convert word1 to  ...

  4. [Swift]LeetCode106. 从中序与后序遍历序列构造二叉树 | Construct Binary Tree from Inorder and Postorder Traversal

    Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  5. [Swift]LeetCode638. 大礼包 | Shopping Offers

    In LeetCode Store, there are some kinds of items to sell. Each item has a price. However, there are ...

  6. 使用jquery实现返回顶部按钮

    实现返回顶部效果,首先需要监听页面的scroll事件,其次才是获取到页面当前的滚动高度 $(window).scrollTop(); 具体代码如下: jquery获取页面元素的一些边界值(宽,高,滚动 ...

  7. 记录一次安装OpenGL的漫长过程

    尝试codeblock和Dev-C++ 这学期新开了一门计算机图形图像的课,里面涉及到openGL,中午跑到图书馆开始倒腾OpenGL. 因为电脑里本来有codeblock,于是就想不用教材里面所说的 ...

  8. 【Storm篇】--Storm基础概念

    一.前述 Storm是个实时的.分布式以及具备高容错的计算系统,Storm进程常驻内存 ,Storm数据不经过磁盘,在内存中处理. 二.相关概念 1.异步: 流式处理(异步)客户端提交数据进行结算,并 ...

  9. Python内置函数(11)——classmethod

    英文文档: classmethod(function) Return a class method for function. A class method receives the class as ...

  10. .NET Core实战项目之CMS 第五章 入门篇-Dapper的快速入门看这篇就够了

    写在前面 上篇文章我们讲了如在在实际项目开发中使用Git来进行代码的版本控制,当然介绍的都是比较常用的功能.今天我再带着大家一起熟悉下一个ORM框架Dapper,实例代码的演示编写完成后我会通过Git ...