VUE

构建数据驱动的web界面的库，技术上重点在于MVVM的ViewModel层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>{{msg}}</div>
    <script src="vue.js"></script>
    <script>
    var data = {
        msg: 'hello'
    }
    new Vue({
        el:'div',
        data:data
    })
    </script>
</body>
</html>

如果要改变显示内容

data.msg = 'world'
data.msg = '瑞源先生'

插值

语法： {{key}}
将数据中的数据同步到页面中的过程；

var data = {
        msg:'欧走不力大后天呢 色'
    }
    var demo = new Vue({
        el:'.my-app',
        data:data
    })

不仅仅可以还可以插在Dom节点内容中，还可以插入到属性中：

<div id="app" class="my-app"><span data-id="{{id}}" style={{styles}}>关注</span>{{msg}}</div>

<script src="vue.js"></script>
<script>
var data = {
    msg:'瑞源先生早上好',
    styles:"color:orange",
    id:20
}
var demo = new Vue({
    el:'.my-app',
    data:data
})

如果我想更改其中一个，可以在后面接着写：


data.styles= 'color:green'

关注的颜色就从橘黄色变成了绿色；

单次插值

数据插入页面中，不能再次修改；

###如果我们不想让初始值（只想插值一次）发生变化，我们可以在key前面加上一个 * ,{{ *key}}

<div id="app" class="my-app"><span data-id="{{id}}" style={{*styles}}>关注</span>{{msg}}</div>

这样就一直是橘黄色了；

同样的案例

修改文案内容：

data.msg = '瑞源学堂欢迎您！'

- 如果不想修改初始文案的内容（只想插值一次）我们同样可以在key前面加上一个*,{{*key}}，

<div id="app" class="my-app"><span data-id="{{id}}" style={{styles}}>关注</span>{{*msg}}</div>

这样文案内容就不会发生变化；

标签过滤

语法{{{key}}}，将数据中的html标签渲染到页面中；

我们想在文案中插入一个标签，把“瑞源先生早上好！”改成“【深圳】瑞源先生在上好！”，【深圳】单独用一个标签包裹，加粗；

var data = {
        msg:'<strong>【深圳】</strong> 瑞源先生早上好！',
        styles:"color:orange",
        id:20
    }

这样页面会把<strong></strong>标签显示出来；
我们需要这样操作：

<div id="app" class="my-app"><span data-id="{{id}}" style={{styles}}>关注</span>{{{*msg}}}</div>

这样就可以了；

插值表达式

插值的过程中，我们可以对插入的数据做运算处理，或调用某些js方法；

如果我们想在id数值面前渲染一个人民币的符号￥

<div id="app" class="my-app">{{'￥' + id}}</div>
var data = {
    id:20
}
var demo = new Vue({
    el:'.my-app',
    data:data
})

￥20就渲染出来了

我们还可以在{{里面进行运算处理}}，我们可以进行加减乘除，字符串拼接，对数据进行js方法的调用;
在里面执行的运算也是要遵循运算符的优先级；

<div id="app" class="my-app">{{'￥' + id * 2 }}</div>

结果为￥40

<div id="app" class="my-app">{{'￥' + id * 2 }}<span>{{styles}}</span></div>

var data = {
    styles:'color:orange',
    id:20
}

页面渲染为：￥40color:green

如果我们想要color:green为大写

<div id="app" class="my-app">{{'￥' + id * 2 }}<span>{{styles.toUpperCase()}}</span></div>

输出为：￥40COLOR:GREEN

插值过滤器

语法{{ key | filter }}
VUE.JS的9289行为我们提供一些内置的过滤器，我们可以直接对插值调用，
比如我们要对数据id:40的值渲染变成美元$40

<div id="app" class="my-app">{{id | currency}}</div> 
var data = {
    styles:'color:orange',
    id:40
}
var demo = new Vue({
    el:'.my-app',
    data:data
})

页面渲染为：$40.00

{{id * 3 | currency}}

页面渲染为： $120.00

{{id | currency '¥'}} 可以使$符号转换为人民币￥符号

过滤器提供了哪些方法？
- json
- capitalize
- uppercase
- lowercase
- currency
- pluralize
- debounce
大写转换：uppercase

<div id="app" class="my-app">{{id * 3 | currency}}
    <p>{{styles | uppercase}}</p>
</div>

COLOR:GREEN

小写转换：lowercase

<p>{{tips | lowercase}}</p>
var data = {
    styles:'color:orange',
    tips:'HEllo,WORLd!',
    id:40
}

hello,world!

首字母大写 capitalize
渲染json格式 json

下面两个可以先跳过，待学了更多知识（v-for,methods等）再回头来学习

pluralize

功能: 如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。
参数：{String} single, [double, triple, ...

<div class="test">
{{message}}    {{message | pluralize 'item'}} <!--输出: 1 item-->
    <ul v-for="item in lili">
        <li>
            {{item}}    {{item | pluralize 'item'}} <!--输出: 1    item 2    items 3    items-->
        </li>
    </ul>
    <ul v-for="item in lili">
        <li>
            {{item}}    {{item | pluralize 'st' 'rd'}} <!--输出: 1    st 2    rd 3    rd-->
        </li>
    </ul>
    <ul v-for="item in man">
        <li>
            {{item}}    {{item | pluralize 'item'}} <!--输出: 1    item 2    items 3    items-->
        </li>
    </ul>
    <ul v-for="item in man">
        <li>
            {{item}}    {{item | pluralize 'st' 'rd'}} <!--输出: 1    st 2    rd 3    rd-->
        </li>
    </ul>
</div>
<script type="text/javascript">
    var myVue = new Vue({
        el: ".test",
        data: {
            message: 1,
            lili: [1,2,3],
            man: {
                name1: 1,
                name2: 2,
                name3: 3
            }
        }
    })
</script>

debounce

(1)限制：需在@里面使用
(2)参数:{Number} [wait] - 默认值： 300
(3)功能：包装处理器，让它延迟执行 x ms，默认延迟 300ms。包装后的处理器在调用之后至少将延迟 x ms，如果在延迟结束前再次调用，延迟时长重置为 x ms。

<div class="test">
    <button id="btn" @click="disappear | debounce 10000">点击我,我将10秒后消失</button>
</div>
<script type="text/javascript">
    var myVue = new Vue({
        el: ".test",
        methods: {
            disappear: function () {
                document.getElementById("btn").style.display= "none";
            }
        }
    })
</script>

动态插值

在插入的过程中，动态的对值进行修改；
语法：

    computed:{
        key:function(){
            return newKey
        }
    }

示例：

<div id="app" class="my-app">
    <p>{{result}}</p>
    <p>{{result | currency}}</p>
</div> 

var demo = new Vue({
    el:'.my-app',
    computed:{
        result:function(){
            return 40
        }
    }
})

页面渲染为
40
$40.00

我们来看看result这个函数内的作用域是什么，console.log(this)

var demo = new Vue({
    el:'.my-app',
    computed:{
        result:function(){
        console.log(this)
            return 40
        }
    }
})

this就是Vue实例化对象，在里面能找到result，值为40，function就是在实例化对象上执行，可以访问Vue对象上的属性；
可以应用表达式过滤器；

来实现一个输入框的值显示的小例子：(非V-方法）

<div id="app">
    <input type="text" id="inp">
    <span>{{result}}</span>
</div>

<script src="vue.js"></script>

<script>
    var demo = new Vue({
        el:"#app",
        data:{
            value:0
        },
        computed:{
            result:function(){
                return this.value * 2
            }
        }
    })
    // 当input输入完之后获取它的值，更新demo的value属性
    document.getElementById('inp').onkeyup = function(e){
        //获取输入框里面输入的值
        var val = e.target.value;
        //赋值给demo下的value
        demo.value = val;
    }
</script>

此时在输入框输入数字就会在后面实时显示结果

数据的双向绑定

vue提供了v-model="",属性值是与vue中绑定数据中的数据；
当视图中一些操作，会修改到vue中的数据，同样，vue的数据被修改时会映射到视图中

<div id="app">
    <input type="text" id="inp" v-model="value">
    <span>{{result | currency}}</span>
</div>
<script src="vue.js"></script>

<script>
var demo = new Vue({
    el:"#app",
    data:{
        value:0
    },
    computed:{
        result:function(){
            return this.value
        }
    }
})
</script>

这样我们也实现了上面一个例子中的双向绑定；

以后我们会用到更多的v- 开头的属性；

vue学习资料一（入门、插值、双向绑定）