vue基础

1. 引入vue.js

下载vue.js文件
远程使用


2. 创建Vue对象

el : 指定根element(选择器)
data : 初始化数据(页面可以访问)
methods:方法
computed:计算 在属性对象中定义计算属性的方法

在页面中使用{{方法名}}来显示计算的结果
$watch() :监视属性,通过通过vm对象的或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算
计算属性高级:通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter计算

3. 数据绑定

1. 双向数据绑定: v-model 和get set双向绑定

 computed: {
    fullName3: {
    // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
    get () {
      console.log('fullName3 get()')
      return this.firstName + '-' + this.lastName
    },
    // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
    set (value) {// fullName3的最新value值  A-B23
      console.log('fullName3 set()', value)
      // 更新firstName和lastName
      const names = value.split('-')
      this.firstName = names[0]
      this.lastName = names[1]
    }
  }
	        }
  1. 指令一: 强制数据绑定

     访问指定站点
    访问指定站点2
    访问指定站点2

4. 显示数据 : {{xxx}}

		双大括号表达式
	  

{{content}}

{{content.toUpperCase()}}

5. 理解vue的mvvm实现

Model:代表数据模型,数据和业务逻辑都在Model层中定义;
View:代表UI视图,负责数据的展示;
ViewModel:就是与界面(view)对应的Model。因为,数据库结构往往是不能直接跟界面控件一一对应上的,所以,需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。
  在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

6.绑定事件监听

1. 绑定监听:
v-on:xxx=“fun”
@xxx=“fun”
@xxx=“fun(参数)”
默认事件形参: event
隐含属性对象: $event

 

1. 绑定监听

test1(event) { alert(event.target.innerHTML) }, test2 (msg) { alert(msg) }, test3 (msg, event) { alert(msg+'---'+event.target.textContent) },
  1. 事件修饰符:
    .prevent : 阻止事件的默认行为 event.preventDefault()
    .stop : 停止事件冒泡 event.stopPropagation()

      

    2. 事件修饰符

    百度一下
  2. 按键修饰符
    .keycode : 操作的是某个keycode值的健
    .enter : 操作的是enter键

       

    3. 按键修饰符

7.class 与 style 绑定

  1. 理解
    在应用界面中, 某个(些)元素的样式是变化的
    class/style绑定就是专门用来实现动态样式效果的技术

  2. class绑定: :class=‘xxx’
    xxx是字符串
    xxx是对象
    xxx是数组

  3. style绑定
    :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
    其中activeColor/fontSize是data属性

     	
    

    {{content}}

    abcd

    17.指令

    1. 注册全局指令
    Vue.directive(‘my-directive’, function(el, binding){
    el.innerHTML = binding.value.toupperCase()
    })
    2. 注册局部指令
    directives : {
    ‘my-directive’ : {
    bind (el, binding) {
    el.innerHTML = binding.value.toupperCase()
    }
    }
    }
    3. 使用指令
    v-my-directive=‘xxx’

    18.自定义插件

    创建自定义插件

    (function (window) {
      const MyPlugin = {}
      MyPlugin.install = function (Vue, options) {
        // 1. 添加全局方法或属性
        Vue.myGlobalMethod = function () {
          console.log('Vue函数对象的myGlobalMethod()')
        }
    	    // 2. 添加全局资源
        Vue.directive('my-directive',function (el, binding) {
          el.textContent = 'my-directive----'+binding.value
        })
    	    // 4. 添加实例方法
        Vue.prototype.$myMethod = function () {
          console.log('vm $myMethod()')
        }
      }
      window.MyPlugin = MyPlugin
    })(window)
    

    **使用自定义插件**
    
    
    
                        
                        

你可能感兴趣的:(vue)