vue学习笔记(一)

Vue简介

Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

框架和库的区别
- 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
  - node 中的 express；
- 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
  - 从Jquery 切换到 Zepto
  - 从 EJS 切换到 art-template
    插值表达式
    1.HTML结构：

1
2
3

<div id="app">
    <p>{{ msg }}</p>
</div>

2.Vue实例：

new vm = new Vue({
    el: '#app',
    data: {
        msg: '你输入的消息'
    }
});

v-cloak,v-text,v-html

v-cloak: 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。用来在防止加载页面时出现字样,优化前端显示。
1.HTML结构

1
2
3

<div id="app">
    <p v-cloak>{{ msg }}</p>
</div>

2.CSS样式

1
2
3

[v-cloak] {
    display: none;
}

v-text: 通过这个指令向标签中的值替换成v-text属性指定的值
1.HTML结构

1
2
3

<div id="app">
    <p v-text="msg">{{ msg }}</p>
</div>

v-html: 可以将Vue中的标签转义成标签输出
1.HTML结构

1
2
3

<div id="app">
    <p v-html="msg"></p>
</div>

2.Vue实例

var vm = new Vue({
    el: '#app',
    data: {
        msg: '<h1>v-html能够识别标签</h1>'
    }
});

v-bind

插值表达式只能在文本中插入,标签属性并不能直接插入.
v-bind命令用于绑定属性,缩写为 :
1.HTML结构

1
2
3

<div id="app">
    <input type="button" value="132" v-bind:title="mytitle">
</div>

1
2
3

<div id="app">
    <input type="button" value="132" :title="mytitle">
</div>

2.Vue实例

var vm = new Vue({
    el: '#app',
    data: {
        mytitle: '这是一个标题'
    }
});

v-on指定事件

v-on命令用于绑定事件(函数),缩写为@
1.HTML结构

1
2
3

<div id="app">
    <input type="button" value="132" v-on:click="show">
</div>

1
2
3

<div id="app">
    <input type="button" value="132" @click="show">
</div>

2.Vue实例

var vm = new Vue({
    el: '#app',
    data: {},
    methods: {
        show: function (){
            alert('hello');
        }
    }
});

跑马灯效果代码

HTML结构：


<div id="app">

    <p>{{info}}</p>

    <input type="button" value="开启" v-on:click="go">

    <input type="button" value="停止" v-on:click="stop">

  </div>

Vue实例：


// 创建 Vue 实例，得到 ViewModel

   var vm = new Vue({

     el: '#app',

     data: {

       info: '猥琐发育，别浪~！',

       intervalId: null

     },

     methods: {

       go() {

         // 如果当前有定时器在运行，则直接return

         if (this.intervalId != null) {

           return;

         }

         // 开始定时器

         this.intervalId = setInterval(() => {

           this.info = this.info.substring(1) + this.info.substring(0, 1);

         }, 500);

       },

       stop() {

         clearInterval(this.intervalId);

       }

     }

   });

教学视频

B站黑马视频: https://www.bilibili.com/video/av50680998

Vue简介

框架和库的区别

插值表达式

v-cloak,v-text,v-html

v-bind

v-on指定事件

跑马灯效果代码

教学视频