vue基础

最新推荐文章于 2022-10-18 22:41:49 发布

qq_39218277

最新推荐文章于 2022-10-18 22:41:49 发布

阅读量163

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_39218277/article/details/106456539

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

1. 引入vue.js

下载vue.js文件
远程使用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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]
    }
  }
	        }

指令一: 强制数据绑定

 <a href="url">访问指定站点</a><br> 
 <a v-bind:href="url">访问指定站点2</a><br>  
 <a :href="url">访问指定站点2</a><br>

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

		双大括号表达式
	  <p>{{content}}</p>
	  <p>{{content.toUpperCase()}}</p>

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

 <h2>1. 绑定监听</h2>
  <button @click="test1">test1</button>
  <button @click="test2('abc')">test2</button>
  <button @click="test3('abcd', $event)">test3</button>
  test1(event) {
        alert(event.target.innerHTML)
      },
      test2 (msg) {
        alert(msg)
      },
      test3 (msg, event) {
        alert(msg+'---'+event.target.textContent)
      },

事件修饰符:
.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()

  <h2>2. 事件修饰符</h2>
   <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>
   <div style="width: 200px;height: 200px;background: red" @click="test5">
     <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
   </div>

按键修饰符
.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键

   <h2>3. 按键修饰符</h2>
   <input type="text" @keyup.13="test7">
   <input type="text" @keyup.enter="test7">
 	
  <button v-on:click="test">点我</button>
 <button @click="test">点我</button>

7.class 与 style 绑定

理解
在应用界面中, 某个(些)元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
class绑定: :class=‘xxx’
xxx是字符串
xxx是对象
xxx是数组

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

 	<style>
 .classA {
   color: red;
 }
 .classB {
   background: blue;
 }
 .classC {
   font-size: 20px;
 }

1. class绑定: :class='xxx'

xxx是字符串

xxx是对象

xxx是数组

   <h2>2. style绑定</h2>
   <p :style="{color:activeColor, fontSize}">:style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>
 
   <button @click="update">更新</button>

  new Vue({
     el: '#demo',
     data: {
       myClass: 'classA',
       hasClassA: true,
       hasClassB: false,
       activeColor: 'red',
       fontSize: '20px'
     },
 
     methods: {
       update () {
         this.myClass = 'classB'
         this.hasClassA = !this.hasClassA
         this.hasClassB = !this.hasClassB
         this.activeColor = 'yellow'
         this.fontSize = '30px'
       }
     }

8. 条件渲染指令

v-if
v-else
v-show
比较v-if与v-show
如果需要频繁切换 v-show 较好

9.列表渲染列表显示与列表更新

列表显示
数组: v-for / index
对象: v-for / key
列表的更新显示
删除item splice（index，个数）
替换item 由于替换不是vue原生索引使用splice先删除在添加
```
       // this.persons[index] = newP  // vue根本就不知道
         this.persons.splice(index, 1, newP)
```
添加item 使用push方法

3.案例

	<div id="demo">
	  <h2>测试: v-for 遍历数组</h2>
	  <ul>
	    <li v-for="(p, index) in persons" :key="index">
	      {{index}}--{{p.name}}--{{p.age}}
	      --<button @click="deleteP(index)">删除</button>
	      --<button @click="updateP(index, {name:'Cat', age: 16})">更新</button>
	    </li>
	  </ul>
	  <button @click="addP({name: 'xfzhang', age: 18})">添加</button>
	
	  <h2>测试: v-for 遍历对象</h2>
	
	  <ul>
	    <li v-for="(item, key) in persons[1]" :key="key">{{key}}={{item}}</li>
	  </ul>
	
	</div>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
	  new Vue({
	    el: '#demo',
	    data: {
	      persons: [
	        {name: 'Tom', age:18},
	        {name: 'Jack', age:17},
	        {name: 'Bob', age:19},
	        {name: 'Mary', age:16}
	      ]
	    },
	
	    methods: {
	      deleteP (index) {
	        this.persons.splice(index, 1) // 调用了不是原生数组的splice(), 而是一个变异(重写)方法
	              // 1. 调用原生的数组的对应方法
	              // 2. 更新界面
	      },
	
	      updateP (index, newP) {
	        console.log('updateP', index, newP)
	        // this.persons[index] = newP  // vue根本就不知道
	        this.persons.splice(index, 1, newP)
	        // this.persons = []
	      },
	
	      addP (newP) {
	        this.persons.push(newP)
	      }
	    }
	  })

10 列表过滤filter 与列表排序sort

  <div id="demo">
  <input type="text" v-model="searchName">
  <ul>
    <li v-for="(p, index) in filterPersons" :key="index">
      {{index}}--{{p.name}}--{{p.age}}
    </li>
  </ul>
  <div>
    <button @click="setOrderType(2)">年龄升序</button>
    <button @click="setOrderType(1)">年龄降序</button>
    <button @click="setOrderType(0)">原本顺序</button>
  </div>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      searchName: '',
      orderType: 0, // 0代表不排序, 1代表降序, 2代表升序
      persons: [
        {name: 'Tom', age:18},
        {name: 'Jack', age:17},
        {name: 'Bob', age:19},
        {name: 'Mary', age:16}
      ]
    },

    computed: {
      filterPersons () {
//        debugger
        // 取出相关数据
        const {searchName, persons, orderType} = this
        let arr = [...persons]
        // 过滤数组
        if(searchName.trim()) {
          arr = persons.filter(p => p.name.indexOf(searchName)!==-1)
        }
        // 排序
        if(orderType) {
          arr.sort(function (p1, p2) {
            if(orderType===1) { // 降序
              return p2.age-p1.age
            } else { // 升序
              return p1.age-p2.age
            }
	          })
        }
        return arr
      }
    },
	methods: {
      setOrderType (orderType) {
        this.orderType = orderType
      }
    }
  })

11.表单输入绑定

使用v-model(双向数据绑定)自动收集数据
text/textarea
checkbox
radio
select
@submit.prevent 阻止默认提交行为

<div id="demo">
  <form action="/xxx" @submit.prevent="handleSubmit">
    <span>用户名: </span>
    <input type="text" v-model="username"><br>

    <span>密码: </span>
    <input type="password" v-model="pwd"><br>

    <span>性别: </span>
    <input type="radio" id="female" value="女" v-model="sex">
    <label for="female">女</label>
    <input type="radio" id="male" value="男" v-model="sex">
    <label for="male">男</label><br>

    <span>爱好: </span>
    <input type="checkbox" id="basket" value="basket" v-model="likes">
    <label for="basket">篮球</label>
    <input type="checkbox" id="foot" value="foot" v-model="likes">
    <label for="foot">足球</label>
    <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
    <label for="pingpang">乒乓</label><br>

    <span>城市: </span>
    <select v-model="cityId">
      <option value="">未选择</option>
      <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
    </select><br>
    <span>介绍: </span>
    <textarea rows="10" v-model="info"></textarea><br><br>

    <input type="submit" value="注册">
  </form>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      username: '',
      pwd: '',
      sex: '男',
      likes: ['foot'],
      allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
      cityId: '2',
      info: ''
    },
    methods: {
      handleSubmit () {
        console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
        alert('提交注册的ajax请求')
      }
    }
  })
</script>

12.生命周期

vue对象的生命周期
1). 初始化显示
- beforeCreate()
- created()
- beforeMount()
- mounted() // 执行异步任务
  2). 更新状态
- beforeUpdate()
- updated()
  3). 销毁vue实例: vm.$destory()
- beforeDestory() // 执行收尾的工作
- destoryed()
常用的生命周期方法
created()/mounted(): 发送ajax请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器

13. 过渡动画

https://cn.vuejs.org/v2/guide/transitions.html

14.过滤器

1). 定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,…]){
// 进行一定的数据处理
return newValue
})
2). 使用过滤器

<div id="test">
  <h2>显示格式化的日期时间</h2>
  <p>{{time}}</p>
  <p>最完整的: {{time | dateString}}</p>
  <p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script>
  // 定义过滤器
  Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {
    return moment(value).format(format);
  })
  new Vue({
    el: '#test',
    data: {
      time: new Date()
    },
    mounted () {
      setInterval(() => {
        this.time = new Date()
      }, 1000)
    }
  })
</script>

16常用内置指令

v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

<style>
[v-cloak] { display: none }
</style>
<div id="example">
  <p v-cloak>{{content}}</p>
  <p v-text="content"></p>   <!--p.textContent = content-->
  <p v-html="content"></p>  <!--p.innerHTML = content-->
  <p ref="msg">abcd</p>
  <button @click="hint">提示</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {
      content: '<a href="http://www.baidu.com">百度一下</a>'
    },
    methods: {
      hint () {
        alert(this.$refs.msg.innerHTML)
      }
    }
  })
</script>

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’

<div id="test">
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
</div>
<div id="test2">
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  // 注册一个全局指令
  // el: 指令所在的标签对象
  // binding: 包含指令相关数据的容器对象
  Vue.directive('upper-text', function (el, binding) {
    console.log(el, binding)
    el.textContent = binding.value.toUpperCase()
  })
  new Vue({
    el: '#test',
    data: {
      msg: "I Like You"
    },
    // 注册局部指令
    directives: {
      'lower-text'(el, binding) {
        console.log(el, binding)
        el.textContent = binding.value.toLowerCase()
      }
    }
  })
  new Vue({
    el: '#test2',
    data: {
      msg: "I Like You Too"
    }
  })
</script>

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)

**使用自定义插件**

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="vue-myPlugin.js"></script>
<script type="text/javascript">
  // 声明使用插件(安装插件: 调用插件的install())
  Vue.use(MyPlugin) // 内部会调用插件对象的install()

  const vm = new Vue({
    el: '#test',
    data: {
      msg: 'HaHa'
    }
  })
  Vue.myGlobalMethod()
  vm.$myMethod()

  new Object()