Vue框架学习记录

双非鼠不想输

已于 2022-11-20 15:29:08 修改

阅读量586

点赞数 1

分类专栏：前端学习文章标签： vue.js

于 2022-11-18 23:03:42 首次发布

本文链接：https://blog.csdn.net/qq_62767608/article/details/127928592

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.简介

概述：Vue是一款前端渐进式框架，可以提高前端开发效率。

特点：

Vue通过MVVM模式,能够实现视图与模型的双向绑定。

简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

二.基本语法

1.创建Vue实例

①data的两种写法：

<body>
     <!-- 准备好一个容器-->
       <div id="root">
			<h1>你好，{{name}}</h1>
		</div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  new Vue({
			el:'#root',//指定,该对象代表<div id="root">,也就是说,这个div中的所有内容,都被当前的vue对象管理
			//data的第一种写法：对象式
			/* data:{
				name:'小李'
			} */

			//data的第二种写法：函数式
			data(){
				return{
					name:'小李'
				}
			}
		})
</script>

这里最好使用data的函数式写法，这才是在写组件时被认可的写法

②el的两种写法：

<body>
     <!-- 准备好一个容器-->
       <div id="root">
			<h1>你好，{{name}}</h1>
		</div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        //el的两种写法
		const v = new Vue({
			//el:'#root', //第一种写法
			data:{
				name:'小李'
			}
		})
		console.log(v)
		v.$mount('#root') //第二种写法，挂载
        /*
  new Vue({
			el:'#root',//指定,该对象代表<div id="root">,也就是说,这个div中的所有内容,都被当前的vue对象管理
			data(){
				return{
					name:'小李'
				}
			}
		})*/
</script>

注意：

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
root容器里的代码被称为Vue模板
Vue实例与容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用

2.插值表达式

功能：用于解析标签体内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域

<body>
    <div id="root">
        <h3>你好，{{name}}!</h3>
    </div>

    <script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data:{ 
                name:'小李',
            }
        })
    </script>
</body>

3.Vue指令

①数据绑定

<body>
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name"><br>
        双向数据绑定：<input type="text" v-model:value="name">
    </div>

    <script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data:{
                name:'小李'
            }
        })
    </script>
</body>

Vue中有2种数据绑定的方式：

单向绑定（v-bind）：数据只能从data流向页面， v-bind可简化成只保留冒号

双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data，双向绑定一般都应用在表单类元素上（如：<input>、<select>、<textarea>等）

②事件绑定

<div id="root">
        <div><input type="button" value="点我执行m1" v-on:click="m1"></div>
        <div><input type="button" value="点我执行m2" @click="m2"></div>
        <div>{{count}}</div>
</div>

<script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data: function () {
               return { count: 0 };
            },
            methods: {
               m1() {
                 this.count ++;
                 console.log("m1")
                },
              m2() {
                 this.count --;
                 console.log("m2")
                }
            }
        })
</script>

注意：

v-on的简写方式：可以把 v-on: 替换为 @

在 methods 方法中的 this 代表的是 data 函数返回的数据对象

③属性绑定

<div id="root">
        <div><input type="text" v-bind:value="name"></div>
        <div><input type="date" v-bind:value="birthday"></div>
        <div><input type="text" :value="age"></div>
</div>
<script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
             data: function () {
               return { name: '王五', birthday: '1995-05-01', age: 20 };
            }
        })
</script>

④显示数据(v-text和v-html)

概述：

v-text和v-html专门用来展示数据, 其作用和插值表达式类似。当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。v-text和v-html可以避免插值闪烁问题.

补充(插值闪烁): 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据

语法：

v-text：<span v-text="msg"></span>    <!-- 相当于<span>{{msg}}</span> -->
v-html：<span v-html="msg"></span>    <!-- 相当于<span>{{msg}}</span> -->

区别：

v-text：把数据当作纯文本显示.
v-html：遇到html标签,会正常解析

⑤计算属性

<div id="root">
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
</div>
<script>
        Vue.config.productionTip = false 
        new Vue({
            el:'#root', 
            data: function () {
                return { firstName: '三', lastName: '张' };
                },
             /* methods: {
                 fullName() {
                  console.log('进入了 fullName')
                  return this.lastName + this.firstName;
                  }
             },*/
            computed: {
               fullName() {
                console.log('进入了 fullName')
                return this.lastName + this.firstName;
                }
             }
          })
</script>

注意：

普通方法调用必须加 ()，没有缓存功能

计算属性使用时就把它当属性来用，不加 ()，有缓存功能：
一次计算后，会将结果缓存，下次再计算时，只要数据没有变化，不会重新计算，直接返回缓存结果

⑥条件渲染(v-if)

 <body>
    <div id="app">
      <p v-if="num > 0.5">随机数 ＞ 0.5</p>
      <p v-else>随机数 ≤ 0.5</p>
      <hr />
      <p v-if="type === 'A'">优秀</p>
      <p v-else-if="type === 'B'">良好</p>
      <p v-else-if="type === 'C'">一般</p>
      <p v-else>差</p>
      <div v-show="a"> 
        测试
      </div>
      <button @click="f">点击</button>
    </div>

    <script>
      const vm = {
        data: function(){
          return {
            // 生成 1 以内的随机数
            num: Math.random(),
            // 类型
            type: 'A',
            a : false 
          }
        },
        methods:{
          f:function(){
            this.a = !this.a
          }
        }
      }
      const app = Vue.createApp(vm)
      app.mount('#app')
    </script>
  </body>
</html>

注意：

v-if="表达式"：适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

v-show="表达式": 适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

⑦列表渲染(v-for)

1.遍历数组

①v-for="item in items"
②v-for="(item,index) in items"

items：要迭代的数组
item：存储数组元素的变量名
index：迭代到的当前元素索引，从0开始

<div id="app">
	<ul>
        <li v-for="(user, index) in users">
        	{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
	</ul>
</div>
<script>
    var app = new Vue({
        el:"#app",//el即element，要渲染的页面元素
        data: {
            users:[
                {"name":"白1","age":8,"gender":"男"},
                {"name":"白2","age":12,"gender":"女"},
                {"name":"白3","age":4,"gender":"男"}
            ]
        }
    });
</script>

显示结果：

2.遍历对象

①v-for="value in object"
②v-for="(value,key) in object"
③v-for="(value,key,index) in object"

value，对象的值
key，对象的键
index, 索引，从0开始

       <!-- 准备好一个容器-->
		<div id="app">
			<ul>
				<li v-for="(value,key,index) in person">
					{{index}}--{{key}}--{{value}}
				</li>
			</ul>
		</div>
		<script>
			var app = new Vue({
				el:"#app",//el即element，要渲染的页面元素
				data: {
					person:{"name":"白大锅", "age":3, "address":"中国"}
				}
			});
		</script>

显示结果：