vue学习笔记【基础篇一】

“时间永远都不够用”———–《海贼王》-索隆

介绍

Vue 是一个 MVVM 的 JavaScript 框架,以 json 为基本数据模型,绑定HTML页面,当 json 从网络中的 json 改变的时候,我们的HTML页面也会改变。

MVVM 概念模型:

这里写图片描述

什么叫MVVM??其实MVVM是这样分割的,M/V/VM。上图中最右边的就是M—>model,最左边就是V—>View,中间就是VM—>ViewModel。VM起到HTML和Json的桥梁的作用,如果Json改变,那么就通过VM在内存中维护的 虚拟 DOM 重新点对点刷新 View 界面,点对点起到提高效率作用;然后,如果View的某个地方有数据改变,比如input标签里面有数据变动,那么就映射到Model里面,这就是VM的监听作用。这里说了那么多,其实还不如看例子,自己体会!!!

初入Vue

进入官网,引入 vue.js

通过Vue雏形,你会知道Vue.js真的很小。

Vue和AngularJs的区别在于Vue很小功能上也不差偏向适合于移动端,AngularJs适合PC端。
在GitHub里面你可以知道,Vue的受欢迎程度超过AngularJS!!!

Vue和AngularJs的相同点在于,它们都不兼容IE8及以下。其实现在都是2017快到2018了,我们为什么还要去兼容IE8以下???为什么???你不觉得可耻吗???信息时代发展飞速,你还在用IE8???

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初入Vue</title>
    <script src="../res/vue.min.js"></script>
    <!-- vue.min.js代表生产版本,vue.js代表开发版本,区别在于生产版本去掉空格这些显得更小 -->
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
</body>
<script>
    //你也许没有发现这是ECM6的新增的var替代类型。如果你还在用var,你就OUT了!!!
    let data = {
        msg:`HAHA,我是Vue,欢迎来到Vue的世界!!!`//你也许没有发现这是ECM6的超级字符串!
    };

    let vm = new Vue({
        el:'#app',//这个是el属性代表选择器,意味将会对哪儿个盒子作为View
        data:data//这个就是Model啦
    });

</script>
</html>

你一定要自己手动运行上面这个例子,你才会知道它的神奇之处!!!也许你实践了,还是觉得Vue不厉害,那么你可以继续尝试下面的例子。

双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <h3>{{msg}}</h3>
        <input type="text" v-model="msg">
    </div>
</body>
<script>
    let data = {
        msg:'有本事你就删除我啊!!!.... .- .... .- .... .-'//别以为我后面这些“.-”是乱写的!!!
    };
    let vm = new Vue({
        el:'.app',//注意,这里的挂载点(选择器)在vue2.0时,不能是body和html,只能是除了它们之外的。
        // 然后,你发现没有,这个例子和上个例子的选择器不一样啊~~~
        data:data
    });
</script>
</html>

数据的基本类型输出和遍历输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{输出基本数据类型和遍历输出}}</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>

    <div class="app">

        常规输出<br><br>
        {{msgS}}<br>
        {{msgI}}<br>
        {{msgB}}<br>
        {{msgArr}}<br>
        {{msgJson}}<br>
        <hr>

        遍历输出
        <ul>
            <li v-for="(item,index) in msgArr">
                下标:{{index}}  数据:{{item}}
            </li>
        </ul><br>
        <ul>
            <li v-for="(item,key,index) of msgJson"><!-- 这里的 key 和 index 顺序不能错了,否则会出现key的值是index的值。 -->
                下标:{{index}} key:{{key}} 数据:{{item}}
            </li>
        </ul>
    </div>
</body>
<script>
    let data = {
        msgS:'风萧萧兮易水寒',
        msgI:11111,
        msgB:true,
        msgArr:['be Alone!','Simple','Dream'],
        msgJson:{a:'普通',b:'困难',c:'地狱'}
    };

    let vm = new Vue({
        el:'.app',//这里不能写多个选择器,然后同名的选择器只有一个生效,所以你不能有两个div都是类属性是app,因为这样只能是第一个生效。
        data:data
    });
</script>
</html>

vue回调函数

通过函数方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-watch</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <div>{{a}}---{{b}}</div>
        a:<input v-model="a" type="text"><br>
        b:<input v-model="b" type="text"><br>
    </div>
</body>
<script>
    let data = {
        a:12,
        b:13
    };
    let vm = new Vue({
        el:'.app',
        data:data
    });
    //this 在这里指的是vm,而vm可以代理data对象的属性。所以vm.a === data.a
    //当 data.a 和 data.b 任意一个值改变的时候,就调用回调函数。
    vm.$watch(function () {
        return this.a + this.b
    },function (newv , oldb) {
        alert('newv:'+newv+" oldb:"+oldb);
    });
</script>
</html>

通过键路径方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-watch</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <div>{{a}}---{{b}}</div>
        a:<input v-model="a" type="text"><br>
        b:<input v-model="b" type="text"><br>
    </div>
</body>
<script>
    let data = {
        a:12,
        b:13
    };
    let vm = new Vue({
        el:'.app',
        data:data
    });
    //当data.a值改变的时候调用回调函数。
    vm.$watch('a',function (newv , oldb) {
        alert('newv:'+newv+" oldb:"+oldb);
    });
</script>
</html>
vm.$watch 返回一个取消观察函数,用来停止触发回调:

var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()
选项:deep

为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
选项:immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调:

vm.$watch('a', callback, {
  immediate: true
})
// 立即以 `a` 的当前值触发回调

v-once,数据不会再刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
<div class="app">
    不管你怎么修改input里面的值,下面的信息就是不会改变!!!
    <input type="text" v-model="goodMsg"><br>
    <input type="text" v-model="badMsg">
    <div v-once>
        goodMsg:{{goodMsg}}<br>
        badMsg:{{badMsg}}
    </div>
</div>
</body>
<script>
    let data = {
        goodMsg:'加油,你绝不能放弃!!!',
        badMsg:'你不能盲目加油!!!'
    };

    let vm = new Vue({
        el:'.app',
        data:data
    });
</script>
</html>

模板语法

插值

文本

数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值:
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。
通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定:
<span v-once>这个将不会改变: {{ msg }}</span>

纯 HTML

双大括号会将数据解释为纯文本,而非 HTML 。为了输出真正的 HTML ,你需要使用 v-html 指令:
<div v-html="rawHtml"></div>
这个 div 的内容将会被替换成为属性值 rawHtml,直接作为 HTML —— 会忽略解析属性值中的数据绑定。注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。反之,对于用户界面(UI),组件更适合作为可重用和可组合的基本单位。

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <div v-html="xhtml"></div>
    </div>
</body>
<script>
    let data = {
        xhtml:'<div>{{msg}}<br><input type="text" v-model="msg"></div>'
    };
    let vm = new Vue({
        el:".app",
        data:data
    });
</script>
</html>

这里写图片描述

v-bind

动态地绑定一个或多个特性,或一个组件 prop 到表达式。

在绑定 class 或 style 特性时,支持其它类型的值,如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
示例:

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

使用 JavaScript 表达式

可以访问用户自定义的全局变量和data属性还有全局系统属性中的数据!!!

迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定, Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

v-if 控制某个标签是否显示

指令(Directives)是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式(v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。回顾我们在介绍中看到的例子:
<p v-if="seen">现在你看到我了</p>
这里, v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML 属性:

<a v-bind:href="url"></a>

在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令,它用于监听 DOM 事件:

<a v-on:click="doSomething">

在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

修饰符

修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

<form v-on:submit.prevent="onSubmit"></form>

之后当我们更深入地了解 v-onv-model时,会看到更多修饰符的使用。

过滤器

Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示:

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

由于最初计划过滤器的使用场景,是用于文本转换,所以 Vue 2.x 过滤器只能用于双花括号插值(mustache interpolation)和 v-bind 表达式中(后者在 2.1.0+ 版本支持)。对于复杂数据的转换,应该使用计算属性。

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在这个例子中,capitalize 过滤器函数将会收到 message 的值作为第一个参数。

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

过滤器可以串联:

{{ message | filterA | filterB }}

在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中,然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。
过滤器是 JavaScript 函数,因此可以接收参数:

{{ message | filterA('arg1', arg2) }}

这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 ‘arg1’ 作为第二个参数,表达式 arg2 取值后的值作为第三个参数。

缩写

v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为(dynamic behavior)时,v- 前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue.js 管理所有模板的单页面应用程序(SPA - single page application)时,v- 前缀也变得没那么重要了。因此,Vue.js 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

它们看起来可能与普通的 HTML 略有不同,但 : 与 @ 对于特性名来说都是合法字符,在所有支持 Vue.js 的浏览器都能被正确地解析。而且,它们不会出现在最终渲染的标记中。缩写语法是完全可选的,但随着你更深入地了解它们的作用,你会庆幸拥有它们。

Simple Dream,海贼王 主角 路飞 一直都在说一句话,“海贼王,我当定了!”,现在才知道,这是一个简单的梦想,然后花尽一切努力去实现它,一个简单的梦想代表着,他的心沉下去了。

而这也是我现在所需要的,我不能本末倒置,为什么本末倒置???因为,在我梦想还没实现之前,我不会再想儿女私情,另一方面我不是那种上面能够坏坏的逗你笑,下面能够很踏实的撑起整个家的人,并且从你对我的表现上看,我相信,我不是那种能够取悦你的人!!!世界还很大,去找一个真真懂的人,而不是为你做事,却成了理所当然!!!

我现在觉得,如果一开始,路就错了,那就要及时回头!!!不管失去什么,我都不能失去梦想!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值