vue.js 详细用法(一)

Vue 适合处理数据， JQ 适合制作页面效果，两者都来自与JavaScript 都可以嵌套js 原生代码。

　　1)，Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单
　　2)，Vue.js 拥抱数据驱动的视图概念
　　3)，Vue.js 所有的应用都是在DOM 层面上的应用，不是在css,html之上的应用，思想应用与DOM 层次之上　

var vm = new Vue({
    // el:指的是绑定的代码块,绑定ip！
    el: '#app',
    //data: 里面才面存放的是变量，可以通过{{ num }} 的形式取出数据        　　
    data:{      　　
        num: 0,
        baidu:'http://www.baidu.com',
        isRed:'red blue',
        red1:'red',
        Font:'50px',
        ok:false,
        point: 'A',
        name: [1, 2, 2, 3, 4, 4, 5, 6],
        one:{
            name:'a',
            age:18,
            sex:'男'
        }
    },
    // 是定义方法，函数的地方，一般与事件连用
    methods:{
        fccli:function () {
            return this.num++   //使用this 操作data
        }
    },
    // 如果不想在页面进行计算，那么就要写在下面
    computed: {
        fun: function () {
            return this.str.split('').reverse().join('')
        }
    },
    // 监听事件，监听 num 如果num 变化，就会触发这个事件！
    watch:{
        num:function (newval,oldval) {
            alert(newval+'|'+oldval)
        }
    }
})

1，Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,有着强大的数据操作，在html上操作数据

2,操作属性采用的是  :属性名=' '
　　:href="#"    href 为#
　　:class='[num==0? 'red':'blue]' //添加class 方法，如果num为0,那么class为red ,num不为0 为blue

3,强大的数据操作
　　<p>{{ str.split('').reverse().join('') }}</p> 可以在页面上进行操作数据！

4，事件！使用‘@+事件’ 操作

　　<button @click="num++">递增</button>
　　@click="fccli" 点击触发函数 fccli  
　　<button @mouseover="num--"> 递减</button> 鼠标在上面触发事件
　　<h1 :style="{color:red1,fonSize:Font}">hello world!</h1>节点增加 html 样式

5， 判断语句,三者必须在一起
　　<h1 v-if="point=='A'">A</h1>
　　<h1 v-else-if="point=='B'">B</h1>
　　<h1 v-else>C</h1>

6，显示隐藏或者不隐藏，v-show 是简单的切换元素的 CSS 属性 display，如果css有display 则为删除
　　<h1 v-show="ok">1111111111</h1>

7，支持for 循环 在数组之中进行循环！
　　<li v-for="(list,index) in name">
　　　　{{ index+1 }} ... {{ list }}
　　</li>

8， for 循环，循环的是键值对
　　<li v-for="(key,velue) in one ">
　　　　{{ velue }}　　
　　</li>

9，冒泡阻止 stop 来阻止冒泡
　　<div class="father" @click="num++">
　　　　<div class="son" @click.stop="num++">
　　　　　　{{ num }}
　　　　</div>
　　</div>