Vue基础

Vue扩展插件

1. vue-cli : vue脚手架
2. vue-resource(目前使用axios): ajax请求
3. vue-router : 路由
4. vuex : 状态管理
5. vue-lazyload: 图片懒加载
6. vue-scroller: 页面滑动开关
7. mint-ui : 基于vue的UI组件库(移动端)
8. element-ui : 基于vue的UI组件库(PC端)

Vue基本使用

<!--
	1. 引入vue.js
	2. 创建Vue对象
		el: 指定根element(选择器)
		data: 初始化数据(页面可以访问)
	3. 双向数据绑定 : v-model
	4. 显示数据: {
   {xxx}}
	5. 理解vue的mvvm实现
-->
<div id="app">
	<input type="text" v-model="username">
	<p>Hello, {
  {username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	new Vue({
    
		el: '#app',
		data: {
    
			username: 'atguigu'
	})
</script>

推荐安装google浏览器vue插件监测vue数据变化

模板语法

<!--
1. 模板的理解:
  动态的html页面
  包含了一些JS语法代码
    大括号表达式
    指令(以v-开头的自定义标签属性)
2. 双大括号表达式
  语法: {
   {exp}} 
  功能: 向页面输出数据
  可以调用对象的方法
3. 指令一: 强制数据绑定
  功能: 指定变化的属性值
  完整写法:
    v-bind:xxx='yyy'  //yyy会作为表达式解析执行
  简洁写法:
    :xxx='yyy'
4. 指令二: 绑定事件监听
  功能: 绑定指定事件名的回调函数
  完整写法:
    v-on:click='xxx'
  简洁写法:
    @click='xxx'
5. 指令五 v-text='content' 直接显示文字
		  v-html='content' 先尝试把content解析成html 如果能解析,显示带标签的文本
-->

<div id="app">
  <h2>1. 双大括号表达式</h2>
  <p>{
  {content}}</p>
  <p>{
  {content.toUpperCase()}}</p>

  <h2>2. 指令一: 强制数据绑定</h2>
  <a href="url">访问指定站点</a><br>
  <a v-bind:href="url">访问指定站点2</a><br>
  <a :href="url">访问指定站点2</a><br>

  <h2>3. 指令二: 绑定事件监听</h2>
  <button v-on:click="test">点我</button>
  <button @click="test">点我</button>

</div>


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    
    el: '#app',
    data: {
    
      content: 'NBA I Love This Game',
      url: 'http://www.atguigu.com'
    },
    methods: {
    
      test () {
    
        alert('好啊!!!')
      }
    }
  })
</script>

计算属性与监视

<!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{
   {方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

  <p>{
  {fullName1}}</p>
  <p>{
  {fullName1}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    
    el: '#demo',
    data: {
    
      firstName: 'A',
      lastName: 'B', 
      fullName2: 'A-B'
    },

    // 计算属性配置: 值为对象
    computed: {
    
      fullName1 () {
     // 属性的get()
        console.log('fullName1()', this)
        return this.firstName + '-' + this.lastName
      },
		//计算属性中,可以用对象的方式设置get() set()方法 固定写法
      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]
        }
      }
    },

    watch: {
    
      // 配置监视firstName
      firstName: function (value) {
     // 相当于属性的set
        console.log('watch firstName', value)
        // 更新fullName2
        this.fullName2 = value + '-' + this.lastName
      }
    }
  })

  // 监视lastName
  vm.$watch('lastName', function (value) {
    
    console.log('$watch lastName', value)
    // 更新fullName2
    this.fullName2 = this.firstName + '-' + value
  })

</script>

深度监视并存储到localStorage中

watch:{
	todos: { // 监视todos这个vue的data数组对象
		deep: true, // 表示深度监视
		handler: function(value) { // 这个value就是每一次todos改变后的值
		//将todos最新的值,保存到localStorage中,localStorage中是通过key-value的形式保存的,最好把它转换成json格式存储
		window.localStorage.setItem('todos_key', JSON.stringify(value))
		}
	}
}
//从data中取数据的时候的写法
data () {
	return {
		//从localStorage读取todos,如果localStorage中没有,json.parse就会转换null,所以判断localStorage取出的数据为空时需要让json转换'[]'数组字符串为空数组
		todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]')
	}
}

强制绑定 class 和style

<head>
  <meta charset="UTF-8">
  <title>04_class与style绑定</title>
  <style>
    .classA {
    
      color: red;
    }
    .classB {
    
      background: blue;
    }
    .classC {
    
      font-size: 20px;
    }
  </style>
</head>
<body>

<!--
1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定 style绑定必须是对象 即一对{}
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性
-->

<div id="demo">
  <h2>1. class绑定: :class='xxx'</h2>
  <p :class="myClass">xxx是字符串</p>
  <p :class