vue入门学习

var vm = new Vue {
　　el: "#my_id"
　　, data: {
　　　　name: "test"
　　　　,url: ""
    　　,txt:"测试" 
　　}
　　,methods: {
　　　　GetData: function(){
　　　　　　//获取数据
          return this.txt；
　　　　}
　　}
　　,computed: { 
　　　　// 计算属性的 getter 
　　　　reversedMessage: function () { 
　　　　　　// `this` 指向 vm 实例 
　　　　　　return this.txt.split('').reverse().join('');//反转字符串
　　　　} 
　　}
   ，filters： {
　　　　capitalize: function (value) { 
　　　　　　　if (!value) return ''；
　　　　　　　　return value;
　　　　 }
   }
};

<div id = "my_id">
{{ txt| capitalize }}
</div>

data 用于定义属性，实例中有3个属性分别为：name、url、txt;
methods 用于定义的函数，可以通过 return 来返回函数值;
调用实例属性和方法：
vm.$el == "my_id";
alert(vm.$data);

methods,computed，效果上两个都是一样的；
computed 基于依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

　　

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter 

var vm = new Vue({
  el: '#app',
  data: {
    name: 'a',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = 'B http://www.baidu.com';

　　

 

v-html: 输出html代码
<div id="app"> 
　　<div v-html="message"></div> 
</div> 
<script> new Vue({ el: '#app', data: { message: '<h1>菜鸟教程</h1>' } }) </script>

指令： 带有 v- 前缀的特殊属性
v-bind 被用来响应地更新 HTML 属性
v-if/v-else-if/v-else
v-show 
v-for
v-model : 在input、select、textarea、checkbox、radio 等表单控件元素上,
               创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
v-on 监听 DOM 事件

　

v-for:

<div id="app"> 
　　<ul> 
　　　　<li v-for="value in object"> {{ value }} </li> 
　　</ul> 

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

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

</div> 

<script> new Vue({ el: '#app', data: { object: { name: 'a', url: '' } } }) </script>

　　

//监听属性

<div id = "computed_props">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>

<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers : 0, //双向绑定
        meters:0
    },
    methods: {
    },
    computed :{
    },
    watch : { //实例监听
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = this.kilometers * 1000
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
    }
    });

    // $watch 是一个实例方法
    vm.$watch('kilometers', function (newValue, oldValue) {
    // 这个回调将在 vm.kilometers 改变后调用
    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})；
</script>

　　

v-bind:class 设置一个对象(字符串或数组)，从而动态的切换 class:

<div class="static active text-danger"></div>
<div class="static"v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }"></div>
<div v-bind:class="{ 'active': isActive }"></div>
<div v-bind:class="[activeClass, errorClass]"></div>

 v-bind:style 直接设置样式：

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">test</div>
</div>

<div v-bind:style="styleObject">test</div>
<div v-bind:style="[baseStyles, overridingStyles]">test</div>

　　

v-on:click: 事件处理

<!-- `greet` 是在定义的方法名 -->
<button v-on:click="greet">Greet</button>


处理 DOM 事件细节修饰符，通过由点 . 表示的指令后缀来调用修饰符

.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

例如：
<!-- 阻止单击事件冒泡 -->
<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>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>


监听键盘按键事件修饰符：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

例如：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

　　

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

<!-- 输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值） -->
<input v-model.number="age" type="number">


<!-- 自动过滤用户输入的首尾空格 -->
<input v-model.trim="msg">