Vue基础

渐进式前端框架,数据驱动
vue官方文档

1. Vue基础

  • el:app对象挂载点,用css选择器选择需要挂在到哪个元素
  • data:数据对象,字符串、数组、对象的访问如下代码所示
  • method:方法
<body>
    <div id="app">
        {{message}}
        {{courses[0]}}
        {{languages.oop}}
    div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hi~",
                courses: ["数据结构", "操作系统", "计算机组成原理", "计算机网络"],
                languages: {
                    pop: "c",
                    oop: "c++",
                }
            },
            method:{
                f: function() {
                    // 方法
                }
            }
        })
    script>
body>

2. 本地应用

2.1 内容绑定


<h2 v-text="message">h2>


<h2 v-text="message+'123'">h2>


<h2 v-html="message">h2>

2.2 事件绑定

使用v-on:click属性或者@click属性。

<input id="app" type="button" value="事件绑定" @click="clickFunction">
<script>
	var app = new var({
        el: "#app",
        methods: {
            clickFunction: function(){
                // 添加事件
            }
        }
    })
script>

甚至还可以传递参数。

<input id="app" type="button" value="事件绑定" @click="clickFunction(111,'hello')">


<input id="app" type="button" value="事件绑定" @keyyup.enter="clickFunction">

2.3 显示隐藏

使用v-show或者v-if属性。属性中支持关系运算符。

<img src="#" v-shwo="true">
<img src="#" v-shwo="isShow">
<img src="#" v-shwo="age>=18">

上述v-show属性全都可以替换成v-if。两者的区别如下表

v-show v-if
修改元素的display样式来达到显示隐藏的效果 直接从DOM树中添加或移除DOM树

2.4 设置元素属性

使用v-bind:属性名或者**:属性名**

<img :src="imgSrc" >
<img :title="imgtitle" >


<img :class="isActive?'active':''">
<img :class="active:isActive">

2.5 for循环构造列表元素

<body>
    <div id="app">
        <input type="button" value="添加" @click="add">
        <input type="button" value="移除" @click="remove">
        <ul v-for="(course,index) in courses">
            <li>{{index+1}} -> {{course}}li>
        ul>
    div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                courses: ["数据结构", "操作系统", "计算机组成原理", "计算机网络"]
            },
            method: {
                add:function() {
                    this.course.push("面向对象程序设计")},
                remove:function() {
                    this.course.shift(); // 移除数组中第0个元素
                }
            }
        })
    script>
body>

2.4 双向绑定

v-model指令便捷的设置和获取表单元素的值。

<input type="text" v-model="message">
<h2> {{ message }} h2>

此时,h2中的内容随input中内容的变化而变化

3. 网络应用

Ajax封装库axios的使用

见Ajax 3. Ajax封装库axios

你可能感兴趣的:(前端)