Vue2 学习记录

vue 代码都是从这段开始.

var vm = new Vue({ 属性 })

var vm = new Vue({
  el: '#idName', //需要渲染的对象
  data: {
    //标准的json数据格式
    msg: 'HelloWorld',
    info: { name: '张三', value: '著名人士' },
    list: [
      { key: 1, val: 'C#' },
      { key: 2, val: 'java' },
    ],
    htmlraw:'<div>原生html内容</div>',
    counter:1
  },
  methods: {
    //自定义方法
    onefun: function() {
      return this.msg.toUpperCase()
    },
  },
  computed: {
    //自定义方法计算属性
    twofun: function() {
      //通常简写
      return this.msg.toUpperCase()
    },
    threefun: {
      //完整写法
      get: function() {
        return this.msg.toUpperCase()
      },
      set: function(v) {
        this.msg = v
      },
    },
  },
  filters: {
    fourfun: function(v) {
      //数据展示前的过滤方法,参数 v 是固定的隐性参数，调用方法的时候我们不用管它，它会自己传
      return v.toUpperCase()
    },
  },
  watch: {
    counter: function(val) {
      this.msg = val.toUpperCase();// 对counter值监听
    },
  }
})
vm.msg = '今天天气不错' //可以通过vm对象对data中的数据进行操作
vm.$watch('counter', function(nval, oval) {console.log('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');});// 这是一个新监听，也就是说counter现在有两个监听
<div id="idName">

<input type="text" v-model:value="msg"/>//将msg绑定到输入框

<div>{{ twofun }}</div>

<div>{{ threefun('第三个方法') }}</div>

<button type="button" v-on:click="onefun"></button>//msg值变大写字母

<div v-if="info.name == '张四'">我不会显示</div>

<div v-else-if="info.name == '张五'">我还是不会显示</div>

<div v-else>我会显示</div>

<div v-for="item in list"v-bind:id="'div-'+item.key">{{item.val}}</div>//循环渲染数据集

<div v-for="item in info">{{item}}</div>//循环读取对象属性值

<div v-for="(v,k,i) in info">{{k}}-{{v}}-{{i}}</div>//循环读取对象,属性名,属性值,下角标

<div v-html="htmlraw"></div>

<button @click = "counter++">计数器</button>

</div>

 

这些自定义属性就是用来渲染页面的

1.el 渲染对象

应该就是 elemet ，表示 html 的标签元素，id(#idName)、class(.className)、标签(div) 都有效，这里的用法和 jquery 没有区别，用途就是告诉 vue 要渲染的对象是谁

2.data 数据集

就是字面上的意思传数据的，比如 data 下有一个{ msg: 'star' } 的属性，页面有一个 {{ msg }} 代码，那么渲染的时候，vue 会自动从 data 中找到 msg 属性来替换 {{ msg }} ，打开的页面就会显示 star 了

3.methods 自定义方法

写过 js、jquery 的都经常用到 vue 也不例外，比如 methods 中定义了一个 { onefun: function(){ this.msg = 'success'; } } 的方法，页面上有一个按钮，通过 v-on:click="onefun" 绑定我们自定义的方法，点击这个按钮就会触发我们写的这个方法了，当然在页面直接输出 {{ onefun() }} 可以。(ps：前面我们页面上显示的 star 就会变成 success ，这是 vue 的一个特点，自动更新渲染)

3.computed 计算属性

本质上就是前面的 methods 的专用版，比如 computed 中定义了一个{ twofun: function(){ return this.msg.toString().toUpperCase(); } }的方法，然后在页面输出 {{ twofun }} ,那么每当 msg 的值发生变化，都会调用这个方法把小写字母转成大写并重新渲染显示，其实这个方法的完整写法应该是

twofun: {
    get: function(){
        return this.msg.toString().toUpperCase();
    },
    set: function(v){
        this.msg = v;
    }
}

是不是发现这玩意儿好眼熟啊，这不就是我们编程里自定义属性的 get;set; 吗？没错就是它！
ps：computed 和 methods 在功能上来看其实没有区别，唯一区别在于 computed 是基于它的依赖缓存，换句话叫敌不动我不动，那性能肯定比 methods 每次都动要高，尤其是大量数据的时候。

4.filters 过滤器

本质上也是前面的 methods 的专用版。一般用于数据展示前做一些自定义渲染处理，比如前面示例中的 {{ msg }} 改成 {{ msg | bigbig }}，然后在 filters 中定义一个叫 bigbig: function(v){ return v.toString().toUpperCase(); } 的函数，那么页面显示的时候就不会是 star 而是 STAR 。过滤器可以同时绑定多个，除了默认传的值以外，还可以像正常调用 js 方法一样，传其他参数，或者回调函数

5.watch 监听

data 中的属性名就是这里的方法名，当通过 v-model 绑定的值发生变化就会触发监听

watch : {
    msg:function(nval, oval) {
        //do something
    }
}

还可以通过 vm.$watch('msg', function(nval, oval) {do something}); 增加监听

html 标签元素中动态绑定.

(ps：在绑定中我们依然可以通过加上 |过滤器方法名 的方式为绑定内容进行处理)

1. v-on:click 通常用简写 @click 动态绑定点击事件，v-on 可以给html现有的事件绑定方法，同时还提供了事件修饰符来辅助，一个绑定同时可以使用多个修饰符，使用修饰符时顺序很重要；相应的代码会以同样的顺序产生。如果发现跟预期不符，那么检查一下是不是顺序有问题。修饰符的具体用途，可以查看官方文档

2. v-bind:id 为标签元素的属性动态绑定值，不止 id 属性，什么 class、style、标签元素有的属性都能绑，href 属性绑定简写 :href，例如：v-bind:class="{ 'class1': fun1(), 'class2': fun2() }" 我们还可以在绑定的时候调用方法，如示例如果方法返回 true 则使用这个样式，false 不使用，甚至还可以在 data 设定一个属性 abc: { class1: true, class2: false }，v-bind:class="abc" 的方式来设置样式

3. v-html 将动态绑定值以html格式展示，比如我前面的 msg 属性值现在是 '<p>这是演示代码</p>'，给一个 div 标签绑定 v-html=msg ,那么页面html代码会展示<div><p>这是演示代码</p></div>

4. v-model 双向绑定，通常用于表单标签，比如 input、select、textarea、checkbox、radio 这些，可以绑定 data 中的属性，当用户进行操作的时候，进行改变的值进行重新渲染，比如场景：左边用户输入内容，右边预览对实际显示效果进行实时渲染。
v-model 有【.lazy、.number、.trim】修饰符，第一个是将实时同步转成 change 后同步，第二个是数字格式，第三是自动去空

5. v-if 通过判断，决定是否对这个标签进行渲染输出，当然它也有配套的 v-else、v-else-if 。v-if 的条件和正常写 js 一样，但不能使用 filters，但是可以使用 methods

6. v-show 和 jquery 的 .show()、.hide()有点像，通过 绑定的值或方法返回值 是 true 或 false 来控制标签的显示隐藏

7. v-for ，可以遍历 array ，可以遍历 object 属性，还可以遍历整数！

v-for="site in sites"，通过遍历 data 中 sites 集合，然后就可以通过 {{ site.属性名 }} 来输出值了。

v-for="site in sites"，通过遍历 data 中 sites 对象，然后就可以通过 {{ site }} 来输出 sites 对象的所有属性的值了。

v-for="(value, key, index) in sites"，通过遍历 data 中 sites 对象，然后就可以通过 {{ value }} {{ key }} {{ index }} 对象的所有属性信息了。ps：index 是可选的参数

v-for="n in 10"，通过整数，然后就可以通过 {{ n }} 输出 1-10 十个整数