Vue.js学习笔记总结1

Posted 2020-10-29 zhtian

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js学习笔记总结1相关的知识，希望对你有一定的参考价值。

一、vue介绍

vue类似于高级的模版引擎

vue的核心思想就是：数据驱动视图 MVVM

<div id="app">
{{ message }}
</div>
var app = new Vue({
el: ‘#app‘,
data: {
message: ‘Hello Vue!‘
}
})

每一个vue程序都是以 new Vue()开始的
每一项vue实例都接收一个选项对象来配置vue应用
选项的 el 属性用来高数 vue的启动入口节点
- 入口节点中所有的节点就可以使用vue的语法了,从某种意义上，vue就是一种高级的模版引擎
- 入口id不能挂载到html,body 元素，只能是一个普通的元素，所以一般我们的页面一开始就来一个 div#app
vue的模版对象数据通过data 选项来指定

以前我们使用template(‘tpl‘,{f00: ‘bar‘ <%=foo %>},或者 {{ foo }})
创建vue程序之后可以通过返回值拿到我们的vue实例，我们可以通过vue实例直接访问data中的成员
data中的数据是响应式的
- data中数据发生改变，则所有绑定了data数据的DOM都会发生改变，这就是所谓的"数据驱动视图"模式mvvm

我们可以通过实例选项的methods来配置实例方法

我们建议把数据放到 data 中

把方法放到 methods 选项中

在方法中我们可以通过 this 来访问 Vue 实例

vue操作自增示例

<!-- 
    el: ‘#app‘ 这里节点是被 Vue 管理的模板
   -->
  <div id="app">
<h1>{{ num }}</h1>
<h2>{{ num }}</h2>
<p>{{ num + 1 }}</p>
<ul>
  <li>{{ num }}</li>
</ul>
<!-- 事件注册，绑定了 data 中的 increment 方法 -->
<button v-on:click="increment">点我让num+1</button>
  </div>
var app = new Vue({
  el: ‘#app‘,
  data: { // 模板数据对象，在模板中可以直接使用
    foo: ‘bar‘,
    num: 10
  },
  methods: {
    increment: function () {
      // 我们利用数据驱动视图的方式，改数据，从而改DOM
      // 不建议直接使用实例的名称，因为一旦实例名称发生改变，这里都得修改
      // app.num++
      this.num++
    }
  }
})

二、数据绑定

属性绑定

 <h1>{{ message }}</h1>
<!-- {{}} 不能用于属性绑定 -->
<!-- 属性绑定使用 v-bind:属性名="数据成员" -->

1.v-model 双向绑定 v-bind单向绑定 v-if 指令

指令名称：v-model
- 语法：v-model="绑定的成员"所谓的双向绑定只是针对表单控件的例如：文本框、单选框、复选框数据的改变会影响这个表单控件表单控件的改变会影响数据
- 使用场景
- 带有 value 的 input 都可以使用双向绑定
- 复选框使用双向绑定

+<input type="checkbox" v-model="checkboxValue"> 复选框双向绑定需要给一个布尔值, 布尔值为真的时候，复选框被占用,布尔值为假的时候，复选框取消选中。当数据发生变化的时候会影响 checkbox，当 checkbox 发生变化的时候会影响数据

v-bind单向绑定
- v-bind 是单向的，只能被数据影响，但是不会影响数据
v-if 指令
- 给一个 Boolean 值，该指令会根据布尔值的真假来显示和隐藏 <div id="box" v-if="seen"></div>
todo-list案例

    <style>
      .done {
        text-decoration: line-through;
        color: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>Todo</h1>
      <!-- {{ }} 中也可以调用方法，将方法的返回值渲染到这里 -->
      <p> {{ calculate() }} of {{ array.length }} remaining <a href="#" v-on:click="clearAll">archive</a></p>
      <ul>
        <li v-for="item in array">
        <!--  因为 checkbox 是双向绑定，所以当 checkbox 发生变化的时候就把改变同步到数据中了
            也就是 item.done 会随着 checkbox 的改变而改变-->
          <input type="checkbox" v-model="item.done">
          <!--  class 比较特殊
            如果是动态的 class 我们也是使用 v-bind 来绑定
            但是我们需要给 class 一个对象
            对象的 key 是类名，值是一个布尔值
            当布尔值为真的时候，则作用这个类名
            反之去除这个类名
            同样的，也是响应式的，当数据发生改变的时候，class 绑定也会受影响 -->
          <span  v-bind:class="{ done: item.done }">{{ item.title }}</span>
        </li>
      </ul>
      <input type="text" placeholder="add new todo here" 
      v-model="inputText">
      <button v-on:click="addArray">add</button>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
    var array=[
            {
              title: ‘吃饭‘,
              done: true
            },
            {
              title: ‘睡觉‘,
              done: false
            },
            {
              title: ‘写代码‘,
              done: false
            },
            {
              title: ‘吃饭‘,
              done: true
            }
          ]
    var app=new Vue({
      el:‘#app‘,
      data: {
        array,
        inputText:‘‘,
      },
      methods: {
        addArray: function(){
          this.array.push({title:this.inputText,done:false})
          this.inputText=‘‘ //清空文本框
        },
        clearAll: function(){
          //找到所有为done:true 的元素从数组中删除
          var newArry=this.array.filter(function(item){
            return !item.done
          })
          this.array=newArry
        },
        //计算剩余为执行的个数 返回done:fase的数组的lenght
        calculate: function(){
        return this.array.filter(function(item){return !item.done}).length        
        }
      }
    })
    </script>