vue入门

1.前端发展史

(1) html --超文本标记语言 (静态网页) --就是一些标签
css+javascript
(2) 动态网页 比较典型的 jsp / php /asp
(3) ajax阶段 – 局部刷新技术
(4) html5 – 网页
(5) nodejs(服务器)–>前端的后代的写法 /java(tomcat)
​ npm(maven)
(6) vue (elementui) react…

2.mvvm结构

• M：即Model，模型，包括数据和一些基本操作
• V：即View，视图，页面渲染结果
• VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

• 只要我们Model发生了改变，View上自然就会表现出来。
• 当用户修改了View，Model中的数据也会跟着改变。
  把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上.

3.Vue

3.1vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html
Vue只关注视图层。
Vue通过新的属性（自定义）和{{表达式}}扩展了 HTML。
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue学习起来非常简单。
官网：https://cn.vuejs.org/

3.2vue特性

轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。
数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
指令
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
插件化
Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
组件化
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

3.3vue安装

(1) 安装的一个环境 nodejs
(2) idea安装nodejs插件
(3)idea 创建一个static web项目
(4)idea下方，打开terminal，输入cmd命令 npm init -y 初始化一个项目
(5) 安装vue
​npm install -g vue 全局安装（会安装到c盘，不推荐）
npm install vue 局部安装（安装到项目目录，推荐）
npm uninstall vue
​npm update vue

3.4使用前

使用vue之前，要先了解es6语法，比如：
(1)let 块级 var 全局 (掌握)
​ 只作用域当前的代码块里面
(2)const 常量 (掌握)
​ 一旦有值,不能修改
(3)解构表达式 (掌握)
​ 数组解构
​ var arr=[1,2,3];
var [a1,a2,a3] = arr;
​ 对象解构
​ var obj = {name:‘xxx’,age:19};
​ var {name,age}=obj
(4)箭头表达式 (掌握)3种声明函数方式

 var obj = {
            name:'张三',
            age:18,
            say:function(){
                console.log(11111)
            },
            say1:()=>{
                console.log(22222)
            },
            say2(){
                console.log(3333333)
            }
        }

(5)promise异步编程 --了解

3.5第一个vue程序

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

3.6vue生命周期

3.7 vue命令

v-text – 类似于innerText
v-html–类似innerHTML

 <div id="app">
        <span v-text = "message"></span>
        <span v-html = "user.str"></span>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                message:"11111111111",
                user: {
                    name: "aaa",
                    age: 23,
                    str:'<span style="color:red">aaa</span>'
                }
            }
        })
    </script>

v-for --循环

<div id="app">
        <ul>
            <li v-for = "h in hobbys">
                {{h}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for = "h in user">
                {{h}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for = "(h,index) in hobbys">
                {{index}}------------{{h}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for = "(value,key,index) in user">
                {{index}}------{{key}}------{{value}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for = "stu in students">
                {{stu.name}}
            </li>
        </ul>
        <hr>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                message:'xx和bb是好朋友',
                user:{
                    username:'东东',
                    age:18,
                    sex:'man'
                },
                hobbys:['洗脚','按摩','大保健','改bug'],
                students:[
                    {id:1,name: "刘备", age: 29, sex: "男"},
                    {id:2,name: "貂蝉", age: 30, sex: "女"},
                    {id:3,name: "吕布", age: 31, sex: "男"}
                ]
            }
        })
    </script>

v-bind – 绑定标签里面属性 比如 v-bind:src=""

 <div id="app">
        <img v-bind:src="img" v-bind:title = "title">
        <input v-bind = "aaa">
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                img:"img/img.jpg",
                title:"风景图片",
                aaa:{
                    type:"text",
                    value:"1111"
                }
            }
        })
    </script>

v-model --绑定标签里面value值, 双向绑定效果

 <input type="text" v-model = "message">
        {{message}}
         <script>
        var app = new Vue({
            el:"#app",
            data: {
                message:'啊啊啊啊啊啊啊'
            }
        })
    </script>

v-show --控制display属性

<div id="app">
        <div v-show = "show">显示</div>
        <div v-show = "hidden">隐藏</div>
        <div v-show = "score>50">{{score}}</div>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                "show":true,
                "hidden":false,
                "score":60,
            }
        })
    </script>

v-if – v-else 判断 ,如果成立 ,显示 不成立,去掉标签

<div id="app">
       <div v-if="age<18"> {{age}}岁是未成年</div>
       <div v-else-if="age > 18 && age <40"> {{age}}岁是中年</div>
       <div v-else> {{age}}岁老了</div>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data: {
                age:44
            }
        })
    </script>