Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

第一个vue程序


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    {{message}}
</div>
   
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //model层：数据
        data:{
            message:"hello,vue!"
        }
    });
</script>
</body>
</html>

效果

vue的基本语法


<span v-bind:title="message">
        鼠标悬停几秒钟查看动态绑定提示信息
    </span>

v-bind等被成为指令。前缀v-开头的表示Vue的特殊属性


v-if 判断
 
<body>
<div id="app">
<!--  <h1 v-if="ok">yes</h1>-->
<!--  <h1 v-else>no</h1> -->
  <h1 v-if="type=='A'">A</h1>
  <h1 v-else-if="type=='B'">B</h1>
  <h1 v-else>C</h1>
</div>
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data:{
      ok: true,
      type: 'A'
    }
  });
</script>
</body>

v-for循环


<body>
<div id="app">
    <h1 v-for="(item,index) in items">
        {{item.message}}---{{index}}
    </h1>
</div>
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data:{
        items: [
            {message: '张三'},
            {message: '李四'}
        ]
    }
  });
</script>
</body>

Vue的七大属性

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

vue双向绑定

什么是双向绑定

vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

实现


<body>
<!--view层 模板-->
<div id="app">
  请输入文本：<input type="text" v-model="message"> 你输入的：{{message}}</br>
  性别：<input type="radio" name="sex" value="1" v-model="checked">男
  <input type="radio" name="sex" value="0" v-model="checked">女
  <p>
    选着了谁:{{checked==1?'男':'女'}}
  </p>
  下拉框：
  <select v-model="select">
    <option value="" disabled>----请选择----</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  选择的是：<span>{{select}}</span>
</div>
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    //model层：数据
    data:{
      message: "123",
      checked: '1',
      select: ''
    }
  });
</script>
</body>

屏幕的显示数据和用户的操作一致

vue的组件

什么是vue的组件

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

例如我们网站存在头部导航，侧边菜单框，共享的内容区等。这些东西都可以是组件。

实现


<body>
<!--view层 模板-->
<div id="app">
  <hello v-for="item in items" v-bind:item="item"></hello>
</div>
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  //定义一个vue组件Component
  Vue.component("hello",{
    props: ['item'],
    template:
            // '<h1>今天天气不错，hello vue！</h1>'+
            '<li>{{item}}</li>>'
  });
  var vm = new Vue({
    el: "#app",
    data: {
      items: ["java","vue","前段"]
    }
  });
</script>
</body>

Vue.component（组件，组件对象）：定义组件

结构体有两个属性props：元素，template：模板

v-for="item in items"：遍历vue里面的实例数组，同时创建相同数量的组件

v-bind:item="item"：将遍历的元素绑定到组件的props的定义为item属性中；=号左边是props的item属性，右边是遍历的属性

vue:Axios异步通讯


data.json
 
{
  "name": "张三",
  "url": "https://www.baidu.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "stree": "1",
    "city": "2",
    "country": "chain"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "狂神说",
      "url": "https://www.kuangstudy.com/"
    }
  ]
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--V-cloak:解决闪烁问题-->
    <style>
        [v-coack]{
          display: none;
        }
    </style>
<body>
<div id="vue" v-cloak>
    <div>{{info.name}}</div>
    <div>{{info.address.country}}</div>
    <a v-bind:href="info.url">点我</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm=new Vue({
    el: "#vue",
      //data:  属性：vm
      data(){
        return{
            //请求返回的参数必须和json一样
            info:{
                name: null,
                address: {
                    stree: null,
                    city: null,
                    country: null
                },
                url: null
            }
        }
      },
    mounted(){
      axios.get('../data.json').then(response=>(this.info=(response.data)));
    }
  });
</script>
</body>
</html>

通过axios的异步请求get获取到data.json的数据然后赋值到data方法的info里面，然后在div就可以取出来

计算属性

computed：计算出来的结果保存在属性中~，内存里面，虚拟Dom里面


<body>
<div id="app">
    <p>{{currentTime1()}}</p></br>
    <p>{{currentTime2}}</p>
</div>
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:"hello,vue!"
        },
        methods: {
            currentTime1: function () {
                return Date.now();//返回时间戳
            }
        },
        computed: {
            currentTime2: function () {//非方法存在缓存，方法名不能和methods里面的一样，否则使用methods里面的
                return Date.now();
            }
        }
    });
</script>
</body>

currentTime2时间戳不变，currentTime1在变，说明currentTime2保存到内存中了

插槽 slot标签


<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //slot:插槽
    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: '书籍列表',
            todoItems: ['Java','Linux','Python']
        },
    });
</script>
</body>

在第一个模块todo里面有两个插槽

在第二个和第三模板，加入了动态属性，将其插入到第一个模板中

自定义事件

$emit自定义事件


<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" v-bind:item="item" :indedx="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //slot:插槽
    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>{{index}}------{{item}} <button v-on:click="remove">删除</button></li>',
        methods: {
            remove: function (index){
                // alert("111")
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data:{
            title: '书籍列表',
            todoItems: ['Java','Linux','Python']
        },
        methods: {
            removeItems: function (index) {
                console.log("删除了"+this.todoItems[index]+"KO")
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    });
</script>
</body>

通过插槽里的模块里面的方法通过$emit和VM的方法进行关联，然后能控制vm里面Data的数据

官网链接中文文档：条件渲染 | Vue.js

官网链接：Vue.js 介绍 — Vue.js 中文文档

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/69719