Vue 的基本认识

1.1.1. 官网
1）英文官网: https://vuejs.org/

2）中文官网: https://cn.vuejs.org/

1.1.2. 介绍描述
1）渐进式 JavaScript 框架

2）作者: 尤雨溪(一位华裔前 Google 工程师)

3）作用: 动态构建用户界面

1.1.3. Vue 的特点
1）遵循 MVVM 模式

2）编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发

3）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目

1.1.4. 与其它前端 JS 框架的关联
1）借鉴 angular 的模板和数据绑定技术

2）借鉴 react 的组件化和虚拟 DOM 技术

1.1.5. Vue 扩展插件
1）vue-cli: vue 脚手架

2）vue-resource(axios): ajax 请求

3）vue-router: 路由

4）vuex: 状态管理

5）vue-lazyload: 图片懒加载

6）vue-scroller: 页面滑动相关

7）mint-ui: 基于 vue 的 UI 组件库(移动端)

8）element-ui: 基于 vue 的 UI 组件库(PC 端)

9）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目

1.2. Vue 的基本使用
1.2.1. 编码

<div  id="app">
    <input  type="text"  v-model="username">
    <p>Hello,  {{username}}</p>
</div>

<script  type="text/javascript"  src="../js/vue.js"></script>
<script  type="text/javascript"> 
    new  Vue({
        el:  '#app', 
        data:  {
            username:  'vue'
        }
     })
</script>

1.2.2. 使用 vue 开发者工具调试
安装vue-devtools.crx（v_4.1.3）

1.2.3. 理解 Vue 的 MVVM

MVVM：
Model：模型，数据对象（data）
View：视图，模板页面
ViewModel：视图模型（Vue的实例）

1.3. 模板语法
1.3.1. 模板的理解
1）动态的 html 页面

2）包含了一些 JS 语法代码

a.双大括号表达式

b.指令(以 v-开头的自定义标签属性)

1.3.2. 双大括号表达式
1）语法: {{exp}}

2）功能: 向页面输出数据

3）可以调用对象的方法

1.3.3. 指令一: 强制数据绑定
1）功能: 指定变化的属性值

2）完整写法:

v-bind:xxx='yyy'    //yyy 会作为表达式解析执行

3）简洁写法:

:xxx='yyy'

1.3.4. 指令二: 绑定事件监听
1）功能: 绑定指定事件名的回调函数

2）完整写法:

v-on:keyup='xxx'
v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'

3）简洁写法:

@keyup='xxx' @keyup.enter='xxx'

1

<div id="app">
    <h2>1. 双大括号表达式</h2>
    <p>{{msg}}</p><!-- textContent -->
    <p>{{msg.toUpperCase()}}</p>
    <p v-text="msg"></p><!-- textContent -->
    <p v-html="msg"></p><!-- innerHTML -->

    <h2>2. 指令一: 强制数据绑定</h2>
    <!-- <img src="imgUrl" alt="大V"> -->
    <!-- <img v-bind:src="imgUrl" alt="大V"> -->
    <img :src="imgUrl" alt="大V">

        <h2>3. 指令二: 绑定事件监听</h2>
    <button v-on:click="test">test1</button>
    <!-- <button @click="test2('abc')">test2</button> -->
    <button @click="test2(msg)">test2</button>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
    el: '#app',
    data: {
        // msg: 'I Will Back!'
        msg: '<a href="http://www.baidu.com">百度网</a>',
        imgUrl: 'https://cn.vuejs.org/images/logo.png'
    },
    methods: {
        test(){
            alert('hihi~~');
        },
        test2(content){
            alert(content);
        }
    }
})
</script>
</body>
</html>