浅谈Vue基础知识（一）

Z时代
2024-01-10
分类：综合

vue

　　首先是Vue的官网：https://cn.vuejs.org/

　　查看官方文档是学习Vue框架的非常必要的环节之一

　　Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

　　Vue和angular、react并列为三大主流框架，而和后两者想对比，Vue更为轻量，并且最易上手。

　　Vue是一种MVVM开发模式的框架，相比于以前MVP模式的开发，它可以使我们只需要关注数据的操作即可，而不是使用大量的js去操作dom，大大的简化了代码，加快了项目的开发速度，并且代码易于管理。

　　在使用Vue时，可以从网上下载vue.js，引入到项目中去，像引入jQuery一样，也可以使用vue-cli来建立vue项目，针对初学者，推荐第一种方法。

　　建立Vue项目（自然是hello world）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                hello world
            </title>
            <script src="./vue.js" type="text/javascript">
            </script>
        </meta>
    </head>
    <body>

 <div >
            {{content}}
        </div>

<script type="text/javascript"> 
　　var app=new Vue({ 
　　　　　　　　el:'#app',
　　　　　　　 data:{ content:"hello world" }
　　　　　　　 })
</script> 
</body> 
</html>

　　v-是vue的指令：
　　v-model可以实现vue的数据双向绑定；

　　v-on绑定事件

使用v-on为button绑定一个alertMessage的事件，在vue的methods中写一个alertMessage的function，这时点击button就会弹窗显示message的数据内容

　　v-on可以简写为@，v-bind可以简写为：；

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                TodoList
            </title>
            <script src="./vue.js" type="text/javascript">
            </script>
        </meta>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue"/>
            <button v-on:click="handleBtnClick">
                submit
            </button>
            <ul>
                <li v-for="item in list">
                    {{item}}
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                list:['todo','doing','done'],
                inputValue:''
            },
            methods:{
                handleBtnClick:function() {
                    if(this.inputValue!=""){
                        this.list.push(this.inputValue);
                    this.inputValue='';
                    }    
                }
            }
        })
    </script>
</html>

组件：
　　组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。一个应用、一个界面可以分化成一个个的小的组件。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                TodoList
            </title>
            <script src="./vue.js" type="text/javascript">
            </script>
        </meta>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="inputValue"/>
            <button @click="handleBtnClick">
                submit
            </button>
            <ul>
                <todo-item @delete="handleItemDelete" :content="item" :index="index" v-for="(item,index) in list">
                </todo-item>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        //全局组件
        // Vue.component("TodoItem",{
        //     props:['content'],
        //     template:"<li>{{content}}</li>"
        // })
        // 局部组件
        var TodoItem={
            props:['content','index'],
             template:"<li @click='handleItemClick'>{{content}}</li>",
             methods:{
                 handleItemClick:function(){
                      this.$emit("delete",this.index);
                 }
             }
        }
        var app=new Vue({
            el:"#app",
            components:{
                TodoItem:TodoItem
            },
            data:{
                list:[],
                inputValue:''
            },
            methods:{
                handleBtnClick:function() {  
                    if(this.inputValue!=""){
                        this.list.push(this.inputValue);
                    this.inputValue='';
                    }
                    else{
                        alert("请输入");
                    }    
                },
                handleItemDelete:function(index){
                    this.list.splice(index,1);
                }
            }
        })
    </script>
</html>

　　Vue的组件可以分为全局组件和局部组件，全局组件不需要再次声明，而局部组件需要去components中声明一下；
　　组件命名推荐使用驼峰式例如TodoItem，但是在使用时要变成todo-item；
　　可以使用v-bind从父组件向子组件传值，使用this.$emit()从子组件向父组件传值；
　　写一个组件，首先在组件中定义一个自定义属性props接口，为组件的提供content、index变量，先将list的内容赋值给item，在子组件中显示content内容并且将index标号赋值，
并且为生成的li中添加一个事件handleItemClick，在子组件中编写此事件的方法，每当点击时执行 this.$emit("delete",this.index);将index传递到父组件，并执行
父组件的handleItemDelete事件，然后删除对应标号的内容；

　　除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：vm.$data === data // => true

vm.$el === document.getElementById('example') // => true
　　$watch 是一个实例方法
　　vm.$watch('a', function (newValue, oldValue) {
　　　　// 这个回调将在 `vm.a` 改变后调用
　　})
　　v-for是循环遍历指令；
　　生命周期的钩子（需要在实际开发中注意）
比如 created 钩子可以用来在一个实例被创建之后执行代码，也有一些其它的钩子，在实例生命周期的不同阶段被调用，
如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
　　不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，
经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
　　通过使用 v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新；
　　{{}}的方式赋值会将内容默认为文本，而如果需要的内容是HTML的话就需要v-html了；比如：content的值为this is should red.

Using mustaches: {{ content }} 显示this is should red.

Using v-html directive: 显示this is should red.
计算属性

<div id="example">
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
</div>

var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
方法：

Reversed message: "{{ reversedMessage() }}"

// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
方法会在执行行刷新数值，而计算属性只有在它依赖的属性改变时才可以改变，计算属性只在相关依赖发生改变时它们才会重新求值。
这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这会大大的加快运行速度。但是

computed: {
now: function () {
return Date.now()
}
}

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
计算属性和侦听属性

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                TodoList
            </title>
            <script src="./vue.js" type="text/javascript">
            </script>
        </meta>
    </head>
    <body>
        <div id="demo">
            {{ fullName }}
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
          el: '#demo',
          data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
          },
          watch: {
                firstName: function (val) {
              this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
              this.fullName = this.firstName + ' ' + val
        }
      }
})
    </script>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                TodoList
            </title>
            <script src="./vue.js" type="text/javascript">
            </script>
        </meta>
    </head>
    <body>
        <div id="demo">
            {{ fullName }}
        </div>
    </body>
    <script type="text/javascript">
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
     fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
  }
})
    </script>
</html>