WEB-VUE

1 vue概述

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

什么场景使用VUE？
绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如: 美团，饿了么，淘宝，知乎，大众点评，微博...

1.1 vue的MVVM设计思想

MVVM是一种设计思想，对早期的web前端开发做了增强，将前端代码按其职责的不同分成了三部分：

界面(View)部分：由html+css构成，并允许在html,css中直接使用变量，表达式，语句等。
模型部分(Model)：一般为一个JSON格式的对象，用于存储view中需要的数据和函数。
视图模型(ViewModel):专门负责自动维护模型对象中的变量与界面中的变量同步。

因为有了ViewModel的存在，数据可以自动同步到界面上，几乎避免了大量重复的编码！

2 插值语法

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

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

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

结果：

Hello Vue!

3 vue常见的指令语法

v-bind
元素的属性值随着程序内容的变化而变化，可使用v-bind：

<元素 v-bind:属性名="变量或js表达式">
简化形式，基本语法如：
<元素 :属性名="变量或js表达式">

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">

v-show

v-if和v-else

v-else-if

v-for
为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>

v-on
@click为v-on:click的缩写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1 v-on:click="handleClick(1)">{{ msg }}</h1>
            <h1 @click="handleClick(2)">{{ msg }}</h1>
        </div>
    </body>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "Hello Vue."
            },
            methods:{
                handleClick: function( who ){
                    this.msg = who+"- 你好，世界";
                }
            }
        });
    </script>
</html>

v-html

v-text

v-model
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

实例测试：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            v-text:<div v-text="txt"></div>
            v-html:<div v-html="html"></div>
            
            v-if:
            <div v-if="age>18">成年</div>
            <div v-if="age<=18">未成年</div>
            
            v-else:
            <div v-if="age>18">成年</div>
            <div v-else="age<=18">未成年</div>
            
            v-else-if:小于60不及格，60-90及格，90-100优秀
            <div v-if="score>=90">优秀</div>
            <div v-else-if="score>=60">及格</div>
            <div v-else="score<60">不及格</div>
            
            v-show:
            <div v-show="age>18">一枝老花</div>
            
            v-for:(foreach,o代表当前对象，每次从数组中获取一个值，存放在中)
            <div v-for="o in colors">{{o}}</div>
            <div v-for="(a,b,c,) in person">{{a}}，{{b}}，{{c}}</div>
            <div v-for="(v,k,i,) in person">{{i}}，{{k}}，{{v}}</div>
            
            <div v-for="(v,k,i) in animal">{{cat}}</div>
            
            object对象：
            <div v-for="p in person">{{p}}</div>
            <div>{{person.name}}</div>
            <div>{{person.tostring()}}</div>
            
        </div>
    </body>
    <script>
        new Vue({
            el:"#app",
            data:{
                txt:"这是一个文本",
                html:"<div style = 'font-size:26px'>这是一个大字</div>",
                age:17,
                score:62,
                colors:['red','blue','green'],
                person:{
                    name:"jack",
                    age:20,
                    address:"北京欢迎您",
                    tostring:function(){
                        return this.name+","+this.age;
                    }
                },
                animal:{
                    name:"dog",
                    age:2,
                    color:"red",
                    cat:{
                        name:"猫咪"
                    }
                }
            }
        })
    </script>
</html>

结果：

WEB-VUE

1 vue概述

1.1 vue的MVVM设计思想

2 插值语法

3 vue常见的指令语法

木安

引用和评论

Spring Cloud-Eureka

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了