安装node.js模块依赖管理⼯具

$ cnpm install

新建一个vue对象

let vm = new Vue({
 el: "#app",// 绑定元素
 data:{ // 封装数据
 name: "wtz",
 num: 1,
 firstName: 'aaa',
 lastName: 'bbb'
 },
 methods: {//封装⽅法
 cancle(){
 this.num --;
 }
 }，
 computed:{
     name: function(){
         return this.firstName + '' +this.lastName
     }
 },
 watch:{
     name:function(){
         this.num++
     }
 }
 });

Vue参数详解

el

el作⽤:指定当前Vue实例所管理的视图,值通常是id选择器

el的值可以是css选择器,通常是id选择器
el的值不能是html标签和body标签

data

data作⽤:指定当前Vue实例的数据对象

data中的数据是响应式数据
值可以是⼀个对象 {属性: 值}
所有数据部分写在data中
在当前Vue实例所管理的视图中通过属性名使⽤data中的数据
可以通过vm.属性访问数据

methods

methods作⽤:指定当前Vue实例中的⽅法

可以直接通过vm实例访问这些⽅法，
⽅法中的 this ⾃动绑定为 Vue 实例。

computed

computed作用：一个属性通过其他属性计算而来

当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值
方便在模板中不使用过于复杂的表达式
computed的属性可以被视为是data一样，可以读取和设值。因此，在computed中可以分为getter(读取)和setter(设值)，一般情况下，是没有setter的，computed只是预设了getter，也就是只能读取，不可以改变设值。所以，computed默认格式（是不表明getter函数的）
在这里，就需要我们注意一下，不是说我们更改了getter中使用的变量（即依赖的属性）,就会触发computed的更新，他有一个前提是computed里的值必须要在模板中使用才可以。但是会触发生命周期的updated()

computed: {
    updateMessage: {
      get: function() {
        console.log('计算属性', this.message)
        return this.message
      },
      set: function(newVal) {
        this.message = newVal
        console.log('newVal', newVal)
      }
    }
  },
 mounted () {
    this.updateMessage = '222'
    console.log('测试：', this)
 },

只有当计算属性中的属性被直接赋值的时候，才会走setter函数，而且，setter函数和getter函数是相互独立的，不是说，走setter函数，就必须走getter函数

watch

watch作用：监听器

监听属性反生变化时,watch监听到并且执行
handler我们写的函数其实就是在写这个handler方法
immediate 表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler
deep 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

差值表达式

作⽤:会将绑定的数据实时的显示出来

通过任何⽅式修改所绑定的数据,所显示的数据都会被实时替换
在插值表达式中不能写js语句, 例如 var a = 10; 分⽀语句循环语句

{{js表达式、三⽬运算符、⽅法调⽤等}}

Vue常用指令

v-text与v-html

很像innerText和innerHTML
v-text:更新标签中的内容
- v-text 更新整个标签中的内容
- 插值表达式: 更新标签中局部的内容
v-html:更新标签中的内容/标签
- 可以渲染内容中的HTML标签
- 注意:尽量避免使⽤，容易造成危险 (XSS跨站脚本攻击)

<p>{{text}},我是p标签中的内容</p>
<p v-text="text">我是p标签中的内容</p>
<p v-text="html">我是p标签中的内容</p>

v-if与v-show

作⽤:根据表达式的bool值进⾏判断是否渲染该元素

v-if不会在源代码中显示出来有更⾼的切换开销
v-show会在源代码中显示出来有更⾼的初始渲染开销
如果需要⾮常频繁地切换，则使⽤ v-show 较好；如果在运⾏时条件很少改变，则使⽤ v-if 较好

<p v-if="isShow">我是v-if数据</p>
<p v-show="isShow">我是v-show数据</p>

v-on

作⽤:使⽤ v-on 指令绑定 DOM 事件，并在事件被触发时执⾏⼀些 JavaScript 代码缩写: @ 语法:

v-on:事件名.修饰符 = "methods中的⽅法名" ; v-on的简写⽅法: @事件名.修饰符 = "methods中的⽅法名"

修饰符

stop - 调用 event.stopPropagation()。
prevent - 调用 event.preventDefault()。
capture - 添加事件侦听器时使用 capture 模式。
self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
native - 监听组件根元素的原生事件。
once - 只触发一次回调。
left - (2.2.0) 只当点击鼠标左键时触发。
right - (2.2.0) 只当点击鼠标右键时触发。
middle - (2.2.0) 只当点击鼠标中键时触发。
passive - (2.3.0) 以 { passive: true } 模式添加侦听器

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：

<my-component @my-event="handleThis"></my-component>

<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

v-for

v-for作⽤: 列表渲染,当遇到相似的标签结构时,就⽤v-for去渲染格式：

v-for="(item,index) in 数组或集合"
参数item:数组中的每个元素
参数index:数组中元素的下标

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示

v-bind

作⽤: 可以绑定标签上的任何属性
缩写: :
格式：

v-bind:属性="值" 或 :属性="值"

<font size="5" v-bind:color="ys1">wtzfont>

v-model

作⽤: 表单元素的绑定双向数据绑定
格式:

<input type="text" id="username" v-model="user.username">

vue对象中的数据发⽣变化可以更新到界⾯
通过界⾯可以更改vue对象中数据
v-model 会忽略所有表单元素的 value 、 checked 、 selected 特性的初始值⽽总是将 Vue 实例的数据作为数据来源。应该在 data 选项中声明初始值

Vue生命周期

Vue⽣命周期⽣命周期是指Vue实例或者组件从诞⽣到消亡经历的每⼀个阶段，在这些阶段的前后可以设置⼀些函数当做事件来调⽤

vue⽣命周期可以分为⼋个阶段，分别是： beforeCreate（创建前）、created（创建后）、beforeMount(载⼊前)、mounted（载⼊后）、 beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）

我们如果想在⻚⾯加载完毕后就要执⾏⼀些操作的话，可以使⽤created和mounted钩⼦函数

<!DOCTYPE html>
<html lang="en">
<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">
 <title>Document</title>
</head>
<body>
 <div id="app">
 {{message}}
 </div>
 <script src="./node_modules/vue/dist/vue.js"></script>
 <script>
 const vm = new Vue({
 el: '#app',
 data: {
 message: 'Vue的⽣命周期'
 },
 beforeCreate: function() {
 console.group('------beforeCreate创建前状态------');
 console.log("%c%s", "color:red", "el : " + this.$el);
//undefined
 console.log("%c%s", "color:red", "data : " +
this.$data); //undefined
 console.log("%c%s", "color:red", "message: " +
this.message);//undefined
 },
 created: function() {
 console.group('------created创建完毕状态------');
 console.log("%c%s", "color:red", "el : " + this.$el);
//undefined
 console.log("%c%s", "color:red", "data : " +
this.$data); //已被初始化
 console.log("%c%s", "color:red", "message: " +
this.message); //已被初始化
 },
 beforeMount: function() {
 console.group('------beforeMount挂载前状态------');
 console.log("%c%s", "color:red", "el : " +
(this.$el)); //已被初始化
 console.log(this.$el);
 console.log("%c%s", "color:red", "data : " +
this.$data); //已被初始化
 console.log("%c%s", "color:red", "message: " +
this.message); //已被初始化
 },
 mounted: function() {
 console.group('------mounted 挂载结束状态------');
 console.log("%c%s", "color:red", "el : " + this.$el);
//已被初始化
 console.log(this.$el);
 console.log("%c%s", "color:red", "data : " +
this.$data); //已被初始化
 console.log("%c%s", "color:red", "message: " +
this.message); //已被初始化
 },
 beforeUpdate: function() {
 console.group('beforeUpdate 更新前状态===============》');
 console.log("%c%s", "color:red", "el : " + this.$el);
 console.log(this.$el);
 console.log("%c%s", "color:red", "data : " +
this.$data);
 console.log("%c%s", "color:red", "message: " +
this.message);
 },
 updated: function() {
 console.group('updated 更新完成状态===============》');
 console.log("%c%s", "color:red", "el : " + this.$el);
 console.log(this.$el);
 console.log("%c%s", "color:red", "data : " +
this.$data);
 console.log("%c%s", "color:red", "message: " +
this.message);
 },
 beforeDestroy: function() {
 console.group('beforeDestroy 销毁前状态===============》');
 console.log("%c%s", "color:red", "el : " + this.$el);
 console.log(this.$el);
 console.log("%c%s", "color:red", "data : " +
this.$data);
 console.log("%c%s", "color:red", "message: " +
this.message);
 },
 destroyed: function() {
 console.group('destroyed 销毁完成状态===============》');
 console.log("%c%s", "color:red", "el : " + this.$el);
 console.log(this.$el);
 console.log("%c%s", "color:red", "data : " +
this.$data);
 console.log("%c%s", "color:red", "message: " +
this.message)
 }
 })
 // 设置data中message数据值
 //vm.message = "good...";
 // 销毁Vue对象
 //vm.$destroy();
 </script>
</body>
</html>

Vue.js之学习