学习笔记：vue（代码篇） - bjhhh

公告

http://cn.vuejs.org/　　VUE官网

VUE模板文件：

<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="pragma" content="no-cache" />
<title></title>
<style type="text/css">
</style>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script language="JavaScript">
var vm = new Vue({
    el:"#app1",
    data:{            //vue的数据
        message:''
    },
    methods:{        //vue的方法
    },
    watch:{            //监听
    },
    filter:{},        //过滤器
    mounted:function(){        //相当于jquery的ready
    },
    computed: {                //vue的计算属性computed
    },
    components:{            //组件
    }
});
</script>
</head>
<body>

</body>
</html>

（为了方便，也放在这里一份）：

var itemlist = {a:1,b:2,c:3,d:4}
itemlist = JSON.parse(JSON.stringify(itemlist ));
console.log(itemlist);

*.vue文件的组成

<template>
....
</template>
<script></script>
<style></style>

vue的所有数据都是放在data里面，data字段也可以在vue里面通过this.message、this.a 、 this.b来取值

new Vue一个对象时，你可以设置它的属性，最重要的是3个：data、methods、watch

<div id="app1">
    <p>{{a}}</p>
    <p v-text="a"></p>
    <p v-html="a"></p>
    <input type="button" value="调用doSomething方法" v-on:click="doSomething"><br>
    {{b}}<br>
</div>
<script type="text/javascript">
var app1 = new Vue({
    el: '#app1',
    data: {    //vue对象的数据
        a:1,
        b:[]
    },
    methods:{    //vue对象的方法
        doSomething:function(){
            this.a++;
            console.log(this.a);
            this.b.push(this.a);
        }
    },
    watch:{    //设置了对象监听的方法
        'a':function(val,oldval){
            console.log('新值：',val,'  旧值：',oldval);
        }
    },
    components:{.....}        //组件
})
</script>

$el 和 $watch：　　http://www.runoob.com/vue2/vue-template-syntax.html

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

数据渲染：

<p>{{a}}</p>
<p v-text="a"></p>
<p v-html="a"></p>

控制模块隐藏：v-if、v-show

<div id="app1">
    <p v-if="isShow">aaaaaaaaa</p>
    <p v-show="isShow">bbbbbbbb</p>
    <p v-if="noShow">ccccccc右键审查元素，会看到if和show的不同</p>
    <p v-show="noShow">dddddddd</p>
</div>
<script type="text/javascript">
new Vue({
    el: '#app1',
    data: {
        isShow:true,
        noShow:false
    }
})
</script>

渲染循环列表：v-for

<ul id="app1">
    <li v-for="item in items">
        <b>{{item.label}}</b>
        <span v-text="item.num"></span>个
    </li>
</ul>
<script type="text/javascript">
new Vue({
    el: '#app1',
    data: {
        items:[
            {label:'apple',num:'5'},
            {label:'banana',num:'3'},
            {label:'orange',num:'22'}
        ]
    }
})
</script>

<li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
</li>

渲染下拉框：

<div id="app1">
<select name="chapter" v-model="section">
    <option v-for="item in book" v-bind:value="item.chapter">
    第{{ item.section }}章
    </option>
</select>
<select name="section" v-model="section">
    <option v-for="item in book" v-bind:value="item.section">
    第{{ item.section }}节
    </option>
</select>
</div>
<script>
var vm = new Vue({
    el:"#app1",
    data:{
        book : [
            {chapter:1,section:1,page:1,content:"aaaa111"},
            {chapter:1,section:2,page:2,content:"aaaa222"},
            {chapter:1,section:3,page:3,content:"aaaa333"},
            {chapter:2,section:1,page:4,content:"bbb11"},
            {chapter:2,section:2,page:5,content:"bbb222"},
            {chapter:3,section:2,page:6,content:"cccc"}
        ]
    },

事件绑定： v-on:click、或 @click

<div id="app1">
<button v-on:click="doSomething">调用doSomething方法</button><br>
<button @click="doSomething">调用doSomething方法</button><br>
</div>
<script type="text/javascript">
var app1 = new Vue({
  el: '#app1',
  methods:{    //方法
    doSomething:function(){
        console.log('aaaaaaa');
    }
  }
})
</script>

属性绑定：v-bind

可以写成　　 <div class="static" v-bind:class="{red:isRed,border1:isBorder}"></div>

还可以写成　　<div class="static" :class="{red:isRed,border1:isBorder}"></div>

http://www.runoob.com/vue2/vue-class-style.html　　看页面下部的几个例子

<style type="text/css">
.shadow{border:1px solid #999;box-shadow:1px 2px 10px #000;}
.border1{border:1px solid #000;}
.red{color:red;}
</style>
<div id="app1">
    <img v-bind:src="imgSrc">
    <img :src="imgSrc" :class="cls">
    <div :class="[cls1,cls2]">aaaaaa</div>
    <div :class="{red:isRed}">aaaaaa</div>
    <div :class="{red:isRed,border1:isBorder}">aaaaaa</div>
</div>
<script type="text/javascript">
var app1 = new Vue({
  el: '#app1',
  data:{
    imgSrc:'1.jpg',
    cls:'shadow border1',
    cls1:'shadow',
    cls2:'border1',
    isRed:true,
    isBorder:true,
  }
})
</script>

过滤：filters

例子：　　http://www.runoob.com/try/try.php?filename=vue2-filters-capitalize

computed 和 methods

http://www.runoob.com/vue2/vue-computed.html

我们可以使用 methods 来替代 computed，效果上两个都是一样的，

但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。

而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。看例子：http://www.runoob.com/try/try.php?filename=vue2-str-reverse4

事件修饰符：

.stop
.prevent
.capture
.self
.once

<a v-on:click.stop="doThis"></a>    　　　　　  　<!-- 阻止单击事件冒泡 -->
<form v-on:submit.prevent="onSubmit"></form>    <!-- 提交事件不再重载页面 -->
<a v-on:click.stop.prevent="doThat"></a>   　 　 <!-- 修饰符可以串联 -->
<form v-on:submit.prevent></form>    　　　　　 　<!-- 只有修饰符 -->
<div v-on:click.capture="doThis">...</div>      <!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.self="doThat">...</div>   　　   <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<a v-on:click.once="doThis"></a>    　　　　　  　<!-- click 事件只能点击一次，2.1.4版本新增 -->

按键修饰符：

.enter　　.tab　　.delete (捕获 "删除" 和 "退格" 键)
.esc　　.space　　.up　　.down
.left　　.right
.ctrl　　.alt　　.shift　　.meta

<input v-on:keyup.13="submit">    　　<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.enter="submit">    <!-- 同上 -->
<input @keyup.enter="submit">   　　  <!-- 缩写语法 -->

（以下3章没学通）

组件：　　http://www.runoob.com/vue2/vue-component.html

全局组件　　http://www.runoob.com/try/try.php?filename=vue2-component1

局部组件　　http://www.runoob.com/try/try.php?filename=vue2-component2

Prop　　http://www.runoob.com/try/try.php?filename=vue2-component3

prop 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"

注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

自定义事件

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

Vue.js 自定义指令、钩子、钩子函数： 　　http://www.runoob.com/vue2/vue-custom-directive.html

Vue.js 路由：　　http://www.runoob.com/vue2/vue-routing.html

Vue.js 路由需要载入 vue-router 库 https://github.com/vuejs/vue-router
中文文档地址：vue-router文档。 http://router.vuejs.org/zh-cn/

VUE的ajax：

<div id="app1">
    <h3>{{message}}</h3>
    <p>姓名 ：{{data.name}}</p>
    <p>年龄 ：{{data.age}}</p>
    <p>性别 ：{{data.gender}}</p>
    <p>学校 ：{{data.school}}</p>
    <p>城市 ：{{data.city}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<script language="JavaScript">
Vue.prototype.$http = axios;
new Vue({
    el:"#app1",
    data:{
        data:"",
        message:'hello'
    },
    created:function(){
            var url="hello_api.php";
            var _self = this;//重要
            this.$http.get(url).then(function(data){
                //console.log(data.data);
                //console.log(data.status);
                //console.log(data.statusText);
                //console.log(data.config);
                //console.log(data.headers);
                //console.log(data.request);
                _self.data=eval( data.data );
                _self.message="Ajax 成功."
            },function(response){
                console.info(response);
            })
    }
});
</script>

附：（ hello_api.php ）

<?php
$arr = array ('name'=>'大皮皮','age'=>13,'gender'=>'女','school'=>'XX大学','city'=>'北京');
echo json_encode($arr);
?>

...

posted on 2017-04-12 21:51 bjhhh 阅读(414) 评论(0) 编辑收藏举报

刷新页面返回顶部

21270

公告