web前端开发之vue基础

一、vue基础

1.1 啥是vue

在这里插入图片描述

1.1.1 创建vue

  1. 引入vue.js 的cdn节点

    1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2. 创建一个 id为app的节点

    1. 如:<div id="app"></div>
  3. 创建vue实例

    1. <script> let app = new Vue({ el: '#app', data: { msg:'vue' } }) </script>
  • el 属性指定当前 vue 实例的挂载点
    • vue实例中的所有数据只能在此dom范围内使用
  • data 中是模型数据,这些数据依赖于当前的vue实例,可以在控制台中通过下面方式访问data中数据

2.1 数据绑定

2.1.1 内容绑定

直接在标签内使用{{}}

<div id="app">
        <p>{{msg}}</p>
</div>
<script>
        let app = new Vue({
            el: '#app',
            data: {
                msg:'我是内容绑定'
            }
        })
    </script>

双{{}}只能显示纯文本

如需显示html内容 则需要使用v-html指令

<div id="app">
    <p v-html="msg"></p>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg:'<b>我是内容绑定</b>'
        }
    })
</script>

2.1.2 属性绑定

  1. 所谓属性绑定就是把data中的数据作为某个元素的属性值
  2. 我们需要使用v-bind:属性名 指令
  3. 属性可以是内置的 也可以是自定义的
<p v-bind:id="id">{{id}}</p>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            id:11
        }
    })
</script>

v-bind: 可以简写为

<p :id="id">{{id}}</p>

2.1.3 表单控件的值

  • 可以用 v-model 指令在表单 <input><textarea><select> 元素上创建双向数据绑定
  • 它会根据控件类型自动选取正确的方法来更新元素
2.1.3.1 文本框和文本域
<input type="text" v-model="value">
<script>
    let app = new Vue({
        el: '#app',
        data: {
            value:'我是文本框'
        }
    })
</script>

<textarea v-model="textarea"></textarea>
        let app = new Vue({
            el: '#app',
            data: {
                textarea:'我是文本域'
            }
        })
2.1.3.2 复选框

​ 对于复选框来说 v-model 绑定的是checked属性

		<label for="swip">游泳</label>
        <input type="checkbox" id="swim" v-model="isSwim">
        <label for="read">阅读</label>
        <input type="checkbox" id="read" v-model="isRead">
        <label for="play">游戏</label>
        <input type="checkbox" id="play" v-model="isPlay">

<script>
        let app = new Vue({
            el: '#app',
            data: {
                isSwim:false,
                isRead:false,
                isPlay:true
            }
        })
    </script>

经过实验我们可以得出:当v-model的值为false的时候 复选框是不会选中的

2.1.3.3 单选框
<label for="man"></label>
<input type="radio" id="man" value="man" v-model="gender">
<label for="women"></label>
<input type="radio" id="women" value="women" v-model="gender">
	<script>
        let app = new Vue({
            el: '#app',
            data: {
                gender:''
            }
        })
    </script>
  • 设置多个单选框的 v-model 为同样的值,就可以省略 name 属性
  • 选择某个单选框后,此单选框的 vlue 属性值会赋值给 gender 属性
  • 设置 gender 属性的值为某个单选框的 value 值,此单选框就会默认选中
2.1.3.4 下拉列表:
<select v-model="city">
            <option value="" disabled selected>请选择</option>
            <option value="bj">北京</option>
            <option value="sjz">石家庄</option>
            <option value="sh">上海</option>
</select>
<script>
        let app = new Vue({
            el: '#app',
            data: {
                city:''
            }
        })
    </script>

3.1 列表渲染

说到列表渲染就会用到v-for指令

<ul>
    <li v-for="item in list">
        {{item}}
    </li>
</ul>
<script>
        let app = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: 1, title: '我是标题1' },
                    { id: 2, title: '我是标题2' },
                    { id: 3, title: '我是标题3' }
                ]
            }
        })
    </script>

v-for的第一个参数可以随便起名 in 要循环渲染的data中的数据

在实际开发中,我们的数据则需要从服务端获取

所以我们用到了fetch方法

 <script>
      let app = new Vue({
        el: '#app',
        data: {
          list: [],
        },
        created: function () {
        // created 函数会再 vue 实例实例化时执行
          fetch('地址')
            .then((res) => {
              return res.json()
            })
            .then((res) => {
              this.list = res
            })
        },
      })
    </script>

3.2 条件渲染

条件渲染的方式有很多种

  • 可以直接使用v-if
  • 配套使用v-if和v-else 和 v-else-if
  • v-if在单独使用的时候,与 v-show 的作用是一样的,都是根据变量的值决定是显示还是隐藏当前元素
3.2.1 v - if
<p v-if="isDouble">你猜猜我会不会被渲染</p>
<script>
        let app = new Vue({
            el: '#app',
            data: {
                isDouble:false
            }
        })
    </script>

通过运行我们可以得出 浏览器并不会渲染 因为isDouble为false

且并不是设置了display为none 而是浏览器并没有这个标签

3.2.2 v- if 和 v - else
<p v-if="isDouble">有对象</p>
<p v-else="isDouble">没对象</p>

结果不用想都知道 那肯定是没对象

isDouble的值为false 而使用了v-else之后 isDouble的值会取反

3.2.3 v- show
<p v-show="isDouble">有对象</p>
<script>
        let app = new Vue({
            el: '#app',
            data: {
                isDouble:false
            }
        })
    </script>
  • 与v - if 不同的是 浏览器渲染了这个元素 但是设置了p标签的style样式为displa:none;

3.3 列表渲染总结:

  • v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。
  • 因此,如果需要非常频繁地切换,则使用 v-show 较好;
  • 如果在运行时条件很少改变,则使用 v-if 较好

4.1 样式处理

操作元素的 class 列表和内联样式是数据绑定的一个常见需求,因为它们都是 attribute。

所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。

不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 classstyle 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组

4.1.1 vue操作class

  • class 与 v-bind:class 可以共存,但是其实最终操作的都是元素的 class 属性
  • v-bind:class 的值可以是字符串、对象或者数组
  • v-bind:class 的值如果为对象,如{active:isActive,color:isColor},则属性名称是 style 中定义的样式类名称,属性值是 data 中定义的变量名称
.active {
     color: red;
}
 <p v-bind:class="active"></p>
    <div id="app">
        // 对象表示法
        // v-bind:class="{类名:data中的属性值}" 如果为true 类名为active 反之为空
        <div :class="{active:color}">vue操作class属性</div>
			
		// 多属性并存
		// 将 class 属性称作静态 class,将 v-bind:class 称作动态class

		<p class="base" v-bind:class="{active:isActive,color:isColor}">对象表示法</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                isactive:true,
                color: true
            },
        })
    </script>

4.1.2 vue操作style

注意

  • 不要忘记加花括号

  • 不同属性值之间用逗号隔开

  • :style=“{属性名:data中的值}”

<div id="app">
        <div :style="{color:color,fontSize:fontSize}">vue操作style属性</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                color: 'red',
                fontSize: '16px'
            },
        })
    </script>

5.1 事件处理

5.1.1 事件监听

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

<div id="app">
        <div>
            // v-on 可以简写成@
            <!-- <button v-on:click="add">按钮</button> -->
            <button @click="add">按钮</button>
            <input disabled type="text" v-model="num">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                add: function () {
                    this.num += 1
                }
            }
        })
    </script>

以上是一个简单的点击事件

我们为button按钮添加了单击事件之后 需要在methods自定义方法中去执行

同样 此方法也可以传值

5.1.2 计算属性

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

例如:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时,就会更加难以处理。

所以,对于任何复杂逻辑,你都应当使用计算属性

代码示例:

    <div id="app">
        <div>{{reverse}}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message:'hello'
            },
             // computed 计算属性
            computed:{
               reverse:function(){
                   // 别忘了使用return返回数据哦
                   // 返回值后 html渲染的时候则需要用到定义的属性 reverse
                   
                   return this.message.split('').reverse().join('')
               }
            }
        })
    </script>

5.1.3 侦听器

<div id="app">
        <input type="text" v-model="message">
        <button>{{btn}}</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: '',
                btn: '侦听器'
            },
            watch: {
                // 侦听谁绑定谁
                // 侦听器有两个属性 原来的值 和新值
                message: function (oldValue, newValue) {
                    this.btn = newValue
                }
            }
        })
    </script>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页