Vue学习(一) —— 初步了解

文章出处:PC的个人博客

1. 前后端关系

Vue 是一套用于构建用户界面的渐进式框架，可以自底向上逐层应用
MVVM 模式
- Model：模型层，表示js
- View：视图层，DOM
- ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者

2. 了解vue——基本语法

Vue属性
- 学习vue我们必须之到它的7个属性，8个方法，以及7个指令。787原则
  - el属性
  - - 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
  - data属性
  - - 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
  - template属性
  - - 用来设置模板，会替换页面元素，包括占位符。
  - methods属性
  - - 放置页面中的业务逻辑，js方法一般都放置在methods中
  - render属性
  - - 创建真正的Virtual Dom
  - computed属性
  - - 用来计算
  - watch属性
  - - watch:function(new,old){}
    - 监听data中数据的变化
    - 两个参数，一个返回新值，一个返回旧值，

注意：

data:{ //表示的是Vue的属性
	
}

date(){ //表示的方法
	return{
	
	}
}

Vue使用连接

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

对象使用{} ，数组使用[]
== 会强转类型，进行比较值相等；===同时比较类型和值+

3. Vue组件讲解

自定义组件，可以直接使用

<div id="app">
  <peng></peng>
</div>

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

  Vue.component("peng",{
    template:'<li> Hello </li>'
  })

  var vm = new Vue({
    el:"#app",
    data:{
    }
  });
</script>

组件内进行传参
- 把Vue组件假设为一个新的页面，需要把值传参进去，将v-bind绑定vue内参数props中的peng，将peng组件中的item值传入
- Vue.component内的属性
  - template 用来定义组件的html模板
  - data 定义一个在组件中使用的数据
  - methods 定义一个在组件中使用的方法
  - props 将父组件的数据传递到子组件
  - 与data中的区别：
    props是从父组件传递过来的，只能读取，不能修改父组件中的值
    data是子组件私有的，可读可写

<div id="app">
<!--  组件：传递给组件中的值：peng-->
  <peng v-for="item in items" v-bind:peng="item"></peng>
</div>

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

<!--  把Vue组件假设为一个新的页面，需要把值传参进去，-->
<!--将v-bind绑定vue内参数props中的peng，将peng组件中的item值传入-->
  Vue.component("peng",{
    props:['peng'],
    template:'<li> {{peng}} </li>'
  })

  var vm = new Vue({
    el:"#app",
    data:{
      items: ["Java", "vue", "c++"]
    }
  });
</script>

4. Vue网络通信 —— Axios异步通信

1. 通信框架

jQuery.ajax()
Axios

2. Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，异步通信框架，主要作用就是实现Ajax的异步通信

使用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Vue的生命周期

mounted 编译好的html挂载到页面完成后执行的事件钩子，此钩子函数中一般会做一些ajax请求获取数据，进行数据初始化（在整个实例中只执行一次）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        [v-clock] {
            display: none;
        }
    </style>
</head>
<body>

<div id="vue" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.age}}</div>

    <a v-bind:href="info.url">点击</a>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>

<script type="text/javascript">
  var vm = new Vue({
    el:"#vue",
    data(){
        return{info:{}}
    },
    mounted(){ // 钩子函数 链式编程 ES6新特性
        axios.get('../data.json').then(response=>(console.log(this.info=response.data)))
    }
  })
</script>
</body>
</html>

data(){
	return{info:{}}
}
这句话，将info的数据放入vue的data中，其中这个data是一个方法，同时每个html里面都有一个this.info表示当前网页对象里面的info值

mounted(){ // 钩子函数 链式编程 ES6新特性
	axios.get('../data.json').then(response=>(console.log(this.info=response.data)))
}
放入钩子函数，调用外部的json数据进行显示，axios.get获取数据，后面执行then表示前面操作后的执行

[v-clock] {
    display: none;
}
// css样式表示对于v-clock事件的绑定，使他加载时候，因为js未下载的闪烁现象

<a v-bind:href="info.url">点击</a>
<!--事件点击网页绑定，用v-bind绑定对应的值-->

5. Vue:计算属性、内容分发、自定义事件

计算属性

计算属性：可以理解为能够在里面写一些计算逻辑的属性。
    作用：
    1）减少模板中的计算逻辑
    2）数据缓存。当我们的数据没有变化时，不在执行计算的过程
    3）依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局数据

?
? 计算属性和方法
? 值不是直接渲染到页面，也是通过计算之后再渲染到页面，可以使用计算属性computed
? 1）methods中的方法在模板中被调用，如果这个方法依赖data，data的值发生了变化，这个方法就会重新执行；计算属性也具备这个特性。保证data中数据与页面中显示的数据保持一致！
? 2）计算属性计算出来的结果会被缓存起来，下次无需计算直接显示，而方法不是，每次调用都会重新执行。

?
? 修改计算属性的值
? 直接修改计算属性的值报错，Computed property “num2” was assigned to but it has no setter.在computed中定义get和set方法，在修改计算属性中的值

插槽slot

注意

:变量可以表示为v-bind

@变量可以表示为v-clock

slot插槽属性，内嵌在模板组件之内，可以进行二次开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
  <todo>
    <todo_title slot="todo_title" :title="title"></todo_title>
    <todo_items slot="todo_items" v-for="item in todoItems" :item="item"></todo_items>
  </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script>
  Vue.component("todo",{
    template: '<div>' +
            '<slot name="todo_title"></slot>' +
            '<ul>' +
                '<slot name="todo_items"></slot>' +
            '</ul>' +
            '</div>'
  })
  Vue.component("todo_title",{
    props: ['title'],
    template: '<div>{{title}}</div>'
  })
  Vue.component("todo_items",{
    props: ['item'],
    template: '<li>{{item}}</li>'
  })
  var vm = new Vue({
    el:"#app",
    data:{
      title:'pc你牛逼',
      todoItems:['彭川Java','彭川学前端','彭川学Linux']
    }
  })
</script>

</body>
</html>

自定义事件——难点

this.$emit()主要用于子组件向父组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
  <todo>
    <todo_title slot="todo_title" :title="title"></todo_title>
    <todo_items slot="todo_items" v-for="(item, index) in todoItems" :item="item" :index="index"
                @remove="removeItems(index)"></todo_items>
  </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script>
  Vue.component("todo",{
    template: '<div>' +
            '<slot name="todo_title"></slot>' +
            '<ul>' +
                '<slot name="todo_items"></slot>' +
            '</ul>' +
            '</div>'
  })
  Vue.component("todo_title",{
    props: ['title'],
    template: '<div>{{title}}</div>'
  })
  Vue.component("todo_items",{
    props: ['item', 'index'],
    template: '<li>{{item}}————{{index}}  <button @click="remove">删除</button></li>',
    methods: {
      remove :function (index) {
        this.$emit('remove', index);
      }
    }
  })
  var vm = new Vue({
    el:"#app",
    data:{
      title:'pc你牛逼',
      todoItems:['彭川Java','彭川学前端','彭川学Linux'],

    },
    methods: {
      removeItems :function (index) {
        this.todoItems.splice(index,1);
      }
    }
  })
</script>

</body>
</html>