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. 5 个免费的受欢迎的 SQLite 管理工具【申明：来源于网络】

    5 个免费的受欢迎的 SQLite 管理工具 包含内容: SQLite Expert – Personal Edition SQLite Expert 提供两个版本,分别是个人版和专业版.其中个人版是 ...

  2. IOS菜鸟学习

    1.NS是系统库.2.IOS类的声明:@interface MyObject : NSObject {    int memberVar1; // 实体变量    id  memberVar2;} + ...

  3. [Swift]LeetCode319. 灯泡开关 | Bulb Switcher

    There are n bulbs that are initially off. You first turn on all the bulbs. Then, you turn off every ...

  4. arm-none-eabi-gcc编译报错：exit.c:(.text.exit+0x16): undefined reference to `_exit'

    该问题的出现是链接文件导致的,是不同的gcc交叉编译器支持的链接文件不同造成的,有几种方法可以解决这个问题. 方法一:更换arm-none-eabi-gcc的版本,这个一般是新的gcc编译器才会抱着错 ...

  5. jquery监听video标签视频播放暂停状态

    由于jquery中没有video的paly,pause方法,所以在使用jquery来控制视频的播放的播放状态时会出现问题 之前的代码: let $video = $('#video'); $('.pl ...

  6. 被BAT疯抢的工程师，都是怎么拿到50万年薪Offer的？

    许多工程师换工作常会出现这种情况:工作能力和潜力都不错,却在面试时无法充分地表现自己,铩羽而归.据拉勾数据调研显示,约有80%的工程师简历通不过初筛,进入终面的不到5% . 技术面试到底应该如何准备? ...

  7. python之高阶函数和匿名函数

    map() map()函数接收两个参数,一个是函数,一个是Iterable,map将传入的函数依次作用到序列的每个元素,并把结果作为新的Iterator返回. def func(x): return ...

  8. Python内置函数(61)——str

    英文文档: class str(object='') class str(object=b'', encoding='utf-8', errors='strict') Return a string ...

  9. 我曾做过陈士成，也做过孔乙己，还做过阿Q

    一. 我现在是陈士成,陈士成现在是我.为什么这么说呢? 那年那天,天刚微微亮,似乎还在打着哈欠.我和父亲去得很早,为的就是在“小升初的考试成绩榜单”前面占一个有利的位置.我不记得当时穿的厚还是不厚,体 ...

  10. angularJS学习（二）

    1.实现列表 思路: accessCtrl.js let AccessCtrl = function($scope, AlertService, DialogService, BigDataServi ...