Vue基础语法入门

最新推荐文章于 2024-05-11 14:44:05 发布

weixin_43201693

最新推荐文章于 2024-05-11 14:44:05 发布

阅读量136

点赞数

文章标签： vue vue.js html

本文链接：https://blog.csdn.net/weixin_43201693/article/details/110086708

版权

vue官方文档 vue文档链接

概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vuex）或既有项目整合
是MVVM模式的实现者

Model：模型层
View：视图层
ViewModel：连接视图和数据的中间件
核心就是实现了虚拟DOM和数据绑定

基本语法

学习任何一门语言首先要学的基本语法就是取值，循环，判断等
因此学习vue也是一样的：
{{}}—取值 v-bing 绑定属性 v-if v-for
下面对上面的语法写个简单的例子
首先需要在idea中下载插件vue.js
然后在html文件引入js
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

取值

初始化一个Vue实例，el表示绑定的id
data表示接收数据的地方
{{message}}表示取Vue中的message的属性
var vm = new Vue({
el: “#app”,
data: {
message: “hello”
}
})
完整代码

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

<div id="app">
    {{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
        data: {
           message: "hello"
        }    
    });
</script>
</body>
</html>

通过v-bing也可以取值

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

v-if

v-if=“data里面的属性名” 取data里面的属性名对应的值

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

v-for

v-for=“集合别名 in 需要遍历的集合”
通过集合别名就可以取对应的值了

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个项目' }
    ]
  }
})

v-on 事件监听

v-on:事件类型=“定义的方法名”

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

v-model

实现数据的双向绑定
v-model=“绑定vue实例中的属性名”
当v-model中的数据发送变化 vue实例中对应的值也会发送变化
vue实例中的值发送变化，v-model的值也会发送变化

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

Vue中重要的三个属性

组件

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

在这里插入图片描述
使用组件很简单第一个参数是组件名字，第二{}里面可以写方法接收参数自定义模板等
Vue.component(‘todo-item’, {
props：[ ‘接收参数’] //由于vue实例和vue组件是不能直接访问的，但是vue实例和vue组件是和视图层直接绑定，因此利用视图层作为中介传递数据
template: ‘

这是个待办项

’ //自定义html
methods：{
写方法
}
})
实例：
自定义组件

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

视图层

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

插槽Slot

在自定义组件todo中自定义一个模板：使用slot name="需要绑定的组件名"定义一个插槽
在视图层使用插槽：slot=“需要绑定的组件名”

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


<div id="a">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-item slot="todo-item" v-for="i in item" v-bind:item="i"></todo-item>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    Vue.component("todo",{

        template: ' <div>\
                         <slot name="todo-title"></slot>\
                          <ul>\
                                <slot name="todo-item"></slot>\
                          </ul>\
                    </div>'
    });

    Vue.component("todo-title",{
        props: ["title"],
        template: '<div>{{title}}</div>'
    })
    Vue.component("todo-item",{
        props:["item"],
        template: '<li>{{item}}</li>'
    })
    var v = new Vue({
        el: "#a",
        data :{
            title:"标题",
            item:["java","php","c"]
        }

    })

</script>

</body>
</html>

自定义事件

//通过自定义事件实现组件调用vue实例中的方法

this.$emit(“自定义方法名”);

流程：

组件定义删除方法事件，删除的内容是在vue实例中的数据
vue实例中定义删除方法事件
视图层通过 v-on：自定义方法名=“vue实例中定义的删除方法名” 来绑定vue实例中的方法
组件中的方法通过this.$emit(“自定义方法名”) 来取到vue实例中的方法并调用该方法

对比数据双向绑定：

vue实例中定义数据的参数名
试图层通过v-bing：自定义参数名=“vue实例参数名” 来绑定vue实例中的参数
组件通过props：[“自定义参数名”] 来取到vue实例中的值

总结：v-bing 和 v-on使用方法一致一个是传递数据一个是传递方法

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


<div id="a">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-item slot="todo-item" v-for="(i,index) in item" v-bind:item="i"
        v-on:remove="remove" v-bind:index="index"
        ></todo-item>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
    Vue.component("todo",{

        template: ' <div>\
                         <slot name="todo-title"></slot>\
                          <ul>\
                                <slot name="todo-item"></slot>\
                          </ul>\
                    </div>'
    });

    Vue.component("todo-title",{
        props: ["title"],
        template: '<div>{{title}}</div>'
    })
    Vue.component("todo-item",{
        props:["item","index"],
        template: '<li>{{item}}  <button @click="removeItem">删除</button></li>',
        methods: {
            removeItem:function (){
                this.$emit("remove");
            }
        }
    })
    var v = new Vue({
        el: "#a",
        data :{
            title:"标题",
            item:["java","php","c"]
        },
        methods:{
          remove:function (index){
              console.log("执行成功过");
              this.item.splice(index,1);//一次删除一个元素
          }
        }
    })
</script>

</body>
</html>