vue的基础知识总结

最新推荐文章于 2024-05-29 00:13:10 发布
最新推荐文章于 2024-05-29 00:13:10 发布
阅读量693 收藏 9
点赞数
分类专栏： vue 文章标签： vue vue.js html5 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/john987321456/article/details/109810163
版权

一、什么是vue？

1、渐进式框架，易用，灵活，高效，可以兼容其他框架

2、渐进式使项目由浅入深，由简单到复杂的方式进行开发

3、vue是双向数据绑定，不用操作DOM，即可改变页面，所以开发者能更好的的专注于业务逻辑

二、vue是基于虚拟DOM

vue是预先通过javascript进行计算，然后在将DOM渲染出来。因为这个DOM是预处理操作，并且没有真实的操作DOM，所以，叫做虚拟DOM

三、vue的基础知识

1、模板插值

 <div id="app">
        <h1>模板语法插值</h1>
        <!-- v-one 禁止修改值 -->
        <div v-once>v-one 禁止修改值:{{age}}</div>
        <!--可以修改值 -->
        <div>可以修改值：{{age}}</div>
        <!-- 插入html标签 -->
        <div>这是一个html标签：{{htmlmode}}</div>
        <div v-html="htmlmode"></div>
        <!-- 在模板使用表达式 -->
        <div>模板中使用表达式：{{age + age2}}</div>
 </div>
 <script type="text/javascript">
        var save_data = {
                age: 1,
                age2: 1,
                htmlmode: '<p style="color:red;">天下无双</p>',
            }
        var vm = new Vue({
            //选择实例化目标
            el: "#app",
            //存储数据
            data: save_data,
        })
        //改变data数据放的方式	
        vm.age = 2;
        save_data.age = 3;
        vm.$data.age = 4;
</script>

2、动态绑定属性

 <div id="app">
    <!-- 动态绑定属性 -->
    <a v-bind:href="websize">跳转到百度</a>
	<!-- 动态绑定样式 -->
	<div v-bind:class="fontColor">动态绑定样式</div>
	<!-- 表达式绑定class样式,可以多个绑定 -->
	<div v-bind:class="{styleColor:isColor,styleSize:isSize}">表达式绑定class样式</div>
	<!-- 数组内表达式绑定class样式,可以多个绑定 -->
	<div v-bind:class="['styleColor',isSize?'styleSize':'']">数组内表达式绑定class样式</div>
	<!-- 动态绑定行内样式 -->
	<div v-bind:style="{color:colVal,background:isbg?'black':''}">动态绑定style行内样式</div>
</div>
<script type="text/javascript">
        var save_data = {
            websize: 'https://www.baidu.com/',
            fontColor: 'styleColor',
            isColor: true,
            isSize: true,
            colVal: 'red',
            isbg: true,
        }
        var vm = new Vue({
            //选择实例化目标
            el: "#app",
            //存储数据
            data: save_data,
        })
</script>
<style>
    .styleColor {
        color: green;
    }
    .styleSize {
        font-size: 30px;
    }
</style>

3、条件渲染 v-if

 <!-- 单个条件渲染 -->
  <div id="app">
	 <div v-if="seeMe">你看不到我(不保留在dom中)</div>
	 <div v-show="seeSta">你看不到我（保留在dom中）</div>
	 <!-- 多个条件渲染 -->
	 <div v-if="keys == 1">满足条件1</div>
	 <div v-else-if="keys == 2">满足条件2</div>
	 <div v-else-if="keys == 3">满足条件3</div>
	 <div v-else>满足最后一个条件</div>
 </div>
 <script type="text/javascript">
        var save_data = {
            seeMe: false,
            seeSta: false,
            keys: 2,
        }
        var vm = new Vue({
            //选择实例化目标
            el: "#app",
            //存储数据
            data: save_data,
        })
</script>

4、列表渲染 v-for

1、可以遍历数组和对象,同时为了区分，每个遍历需要加上:key=“index”
2、注意value和index，一定要加上()，不然严格方式会报错

<div id="app">
	<ul>
	   <li v-for="(value,key) in pList" v-bind:key="key">
	   数组渲染：{{key}} - {{value.name}}
	   </li>
	</ul>
	<ul>
	   <li v-for="(value,index) in numList" v-bind:key="index">
	   对象渲染：{{index}} - {{value}}
	   </li>
	</ul>
</div>
<script type="text/javascript">
        var save_data = {
                pList: [
                {name: "johnli"}, 
                { name: "mark"}, 
                { name: "rose"}
                ],
                numList: {
                    name: 'rose',
                    sex: '女',
                    age: 18,
                },
            }
        var vm = new Vue({
            //选择实例化目标
            el: "#app",
            //存储数据
            data: save_data,
        })
</script>

5、事件处理

<div id="app">
      <button type="button" v-on:click="touchAct(1,$event)">
       点击次数：{{tuchCount}}
      </button>
</div>
<script type="text/javascript">
        var save_data = {
                tuchCount:0
            }
        var vm = new Vue({
            //选择实例化目标
            el: "#app",
            //存储数据
            data: save_data,
            methods: {
                touchAct: function(type, e) {
                    this.tuchCount++;
                }
            },
        })
</script>

6、表单双向绑定

<div id="app">
	<form>
        <div>
            <label>text表单：</label>
            <div><input v-model="inputVal"></div>
            <div>{{inputVal}}</div>
        </div>
        <div>
            <label>mark</label>
            <input type="checkbox" value="mark" v-model="checkboxVal">
            <label>rose</label>
            <input type="checkbox" value="rose" v-model="checkboxVal">
            <label>frank</label>
            <input type="checkbox" value="frank" v-model="checkboxVal">
            <div>{{checkboxVal}}</div>
        </div>

        <div>
            <label>男</label>
            <input type="radio" value="男" v-model="radioboxVal">
            <label>女</label>
            <input type="radio" value="女" v-model="radioboxVal">
            <div>{{radioboxVal}}</div>
        </div>
    </form>
</div>
<script type="text/javascript">
        var save_data = {
                inputVal: '',
                checkboxVal: [],
                radioboxVal: '',
            }
        var vm = new Vue({
            //选择实例化目标
            el: "#app",
            //存储数据
            data: save_data
        })
</script>

7、全局组件

（1）全局组件必须在vue实例化之前声明
（2）在任何地方都可以调用全局组件
（3）全局组件有两种内嵌式和单文件方式声明
（4）全局组件声明关键字

Vue.component()

<div id="app">
     <div>
         <head-model></head-model>
         <button-model titles="按钮2"></button-model>
         <button-model titles="按钮2"></button-model>
     </div>
</div>
<script type="text/javascript">
      //*
      //*第一种全局组件声明方式
      //*
      Vue.component("button-model", {
            //titles是组件传值
            props: ['titles'],
            //data必须是一个函数
            data: function() {
                return {
                    nums: 0
                }
            },
            template: '<div><button v-on:click="showMark">{{titles}}：{{nums}}</button></div>',
            methods: {
                showMark: function() {
                    this.nums++;
                }
            }
        })
        var vm = new Vue({
            //选择实例化目标
            el: "#app",
            //存储数据
            data: {}
        })
        
       //*
      //*第二种全局组件声明方式，单文件方式
      //
      import Head from './components/commen/Head';
      Vue.components('head-model',Head );
      new Vue({render:h=>h(App)}).$mount("#app")
        
</script>

8、局部组件

局部组件使用步骤：

（1）引入局部组件
（2）注册局部组件
（3）调用局部组件

<div id="app">
        <div>
          <test></test>
        </div>
</div>
<script type="text/javascript">
       //*
      //*第一种局部组件声明方式
      //*
        var vm = new Vue({
            //选择实例化目标
            el: "#app",
            //存储数据
            data: {},
            //局部组件
			components:{
				test:{
					template:"<h1>这是一个局部组件</h1>"
				}
			}
        })
</script>

<template>
    <div id="Foot">
        <!-- 3，调用局部组件-->
        <test/>
        <Test/>
        <md-test/>
    </div>
</template>
<script type="text/javascript">
       //*
      //*第二种局部组件，单文件方式
      //*
      //1,引入局部组件
      import test form '/components/test';
      exprot default{
            //选择实例化目标
            name: "Foot",
            //2，注册局部组件
			components:{
				test //第一种写法
				Test:test //第二种写法
				'md-test':test//第三种写法 
			}
        }
</script>

9、组件属性传值（父组件=>子组件）

（1）固定值传值，采用名值对。如：jyname是固定值传值
（2）变量传值，采用冒号+名=变量。如：:marks=“markvalue”
（3）子组件不可直接修改父组件的值，需用通过注册事件（this.$emit()）方式，返回到父组件修改

父组件
<template>
    <div id="app">
        //jyname是固定值传值
        //:marks 属性绑定传值
        //@setMarksPrent 来至子组件注册事件
        <HelloWorld :marks="markvalue" jyname="这是一个固定值" @setMarksPrent="updateMarks" />
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'
    export default {
        name: 'App',
        data() {
            return {
                markvalue: '这是一个变量值'
            }
        },
        components: {
            HelloWorld
        },
        methods: {
            updateMarks: function (e) {
                this.markvalue = e;
            }
        }
    }
</script>
********************************************
子组件
<template>
    <div class="hello">
        <h1>{{ marks }}</h1>
        <h1>{{ jyname }}</h1>
        <button @click="setMarks">修改父组件marks的值</button>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            marks: {
                type: String
            },
            jyname: {
                type: String
            }
        },
        methods:{
            setMarks:function(){
                //注册事件
                //1,事件名称，2传值
                this.$emit('setMarksPrent','修改成功')
            }
        }
    }
</script>

10、生命周期钩子

<script type="text/javascript">
var vm = new Vue({
            //选择实例化目标
            el: "#app",
            //存储数据
            data: {},
            //生命周期
            //生命周期--1、实例化之后，数据data和event/watcher事件配置之前被调用
            beforeCreate: function() {
                console.log('beforeCreated');
            },
            //生命周期--2、实例创建完之后，挂在之前
            //这里完成以下配置：
            //（1）data
            //（2）属性和方法运算
            //（3）watch/event事件回调
            created: function() {
                console.log('created');
            },
            //生命周期--3、挂在之前,渲染函数首次被调用
            beforeMount: function() {
                console.log('beforeMount');
            },
            //生命周期--4、挂在成功，el被新创建的vm.$el替换
            mounted: function() {
                console.log('mounted');
            },
            //生命周期--5、数据变化之前
            beforeUpdate: function() {
                console.log('beforeUpdate');
            },
            //生命周期--6、组件DOM已经更新
            updated: function() {
                console.log('updated');
            },
            //生命周期--7、组件激活是调用
            activated: function() {
                console.log('activated');
            },
            //生命周期--8、组件停用时调用
            deactivated: function() {
                console.log('deactivated');
            },
            //生命周期--9、捕获来至子组件错误调用
            errorCaptured: function() {
                console.log('errorCaptured');
            },
            // //生命周期--10、销毁之前
            beforeDestroy: function() {
            	console.log('beforeDestroy');
            },
            // //生命周期--11、销毁之后
            destroyed: function() {
             	console.log('destroyed');
            }
        })
 </script>

11、插槽

1、多个插槽，父组件使用solot属性区别，子组件使用name属性区分
2、样式可以存放到父组件或者子组件
3、标签中有变量，必须在父组件中完成转化

<!-- 这是父组件 -->
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App">
        <!-- 多个插槽，name父组件使用solot属性区别，子组件使用name属性区分 -->
        <div slot="title">这是插槽标题</div>
        
        <!-- 标签中有变量，必须在父组件中完成转化 -->
        <div slot="mark">这是插槽备注说明：{{solt_mars}}</div>
        
        <!-- 作用域插槽 -->
        <template v-slot:title="values">
                <h2 >插槽标题:{{values.num}}</h2>
        </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  data(){
     return {
        solt_mars:'动态插槽内容'
     }
  },
  components: {
    HelloWorld
  }
}
</script>
*************************************************
这是子组件
<template>
  <div class="hello">
      <slot name="title"></slot>
      <div>这一个分界线</div>
      <slot name="mark"></slot>
      <slot name="title" :num="9527"></slot>    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

12、动态组件和缓存

1，动态组件关键标签component :is=“动态组”
2，缓存关键组件keep-alive ，在keep-alive下的组件能够缓存数据

<template>
	<div class="index">
		<keep-alive>
			<component :is="showModel"></component>
		</keep-alive>
	</div>
</template>

<script>
	import One from '@/views/one.vue'
	import Two from '@/views/two.vue'

	export default {
		name: 'index',
		data() {
			return {
				showModel: 'Two'
			}
		},
		components: {
			One,
			Two
		}
	}
</script>
一码平串串
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
ranran0306的博客
06-27 8196
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
vue基础知识总结--01
06-30
vue基础知识总结--01
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
热门推荐
CYK_byte的博客
10-16 1万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
Vue篇(超详细讲解)
2301_77112535的博客
12-14 6642
Vue:一套用于构建用户界面的渐进式JavaScript框架渐进式: vue可以自底向上逐层的应用如果应用很简单:只需要一个轻量小巧的核心库如果应用很负责:可以引用各式各样的Vue插件1、采用组件化模式,提高代码复用率,且让代码更好维护。2、声明式编码,让编码人员无需直接操作DOM,体高开发效率、3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。1、Vue的操作命令 启动.Vue 去你对应的包里 直接 yarn serve2、首先先需要检测自己是否安装了yarn 命令。
vue详解
a2945090920的博客
05-29 240
1.数据绑定 2.el和data的两种写法 3.MVVM 4.数据代理（Object defineProperty)
【Vue】快速入门
你不来，再美的天地，都狼藉 ~
03-24 1680
一文带你从HelloWorld认识Vue框架，深刻理解！
前后端分手大师——MVVM 模式
weixin_34130389的博客
11-15 546
阅读目录简而言之组成部分没有什么是一个栗子不能解决的 简而言之 之前对 MVVM 模式一直只是模模糊糊的认识，正所谓没有实践就没有发言权，通过这两年对 Vue 框架的深入学习和项目实践，终于可以装B了有了拨开云雾见月明的感觉。 Model–View–ViewModel(MVVM) 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Pet...
2024年Vue基础知识总结 4：vue组件化开发，ui前端开发学习课程-vue 全局组件
最新发布
07-06
前端组件学习 2024年Vue基础知识总结 4：vue组件化开发，ui前端开发学习课程_vue 全局组件
Vue.js基础知识汇总
10-22
Vue.js 是一款轻量级的前端JavaScript框架，专注于MVVM（Model-View-ViewModel）模式的ViewModel层。Vue.js 的核心理念是通过双向数据绑定连接视图...学习和掌握Vue.js的基础知识，能够极大地提升开发效率和代码质量。
Vue.js基础知识小结
12-29
var app = new Vue({ el:#app, data:{ message:Hello,vue.js! } 2.双向绑定 <p>{{message}} <input v-model=message /> var app = new Vue({ el:#app, data:{ message:Hello,vue.js! } 3.v-for列表渲染 ...
Vue的基础知识汇总(适用于后端人员和前端初学者)
07-02
Vue的基础知识汇总(适用于后端人员和前端初学者)，Vue的基础知识汇总(适用于后端人员和前端初学者)，Vue的基础知识汇总(适用于后端人员和前端初学者)，Vue的基础知识汇总(适用于后端人员和前端初学者)，Vue的基础...
vue的基础知识大全，一篇文章就够了！
qq_65010070的博客
09-22 5478
Vue的基础知识，持续整理中。。。
Vue 基础入门 - 看这一篇就够了！！！
niubiwhat的博客
09-05 5150
Vue 入门基础篇
Vue基础知识
weixin_45838066的博客
02-27 656
vue
Vue基础知识学习
m0_59354300的博客
05-01 836
Vue前端框架 一、Vue基础 1、导入包 开发板的Vue.js 2、创建Vue的实例对象，设置el属性和data属性 #–>id选择器 3、使用简洁的模板语法把数据渲染到页面上 el是挂载点 作用：设置Vue实例挂载 注意：el的使用范围是el挂载对象以及他的后代 el可以用其他的选择器 eg.类选择器class = “div1” el = ‘.div1’ 标签选择器 el = ‘div’ ,但是建议使用id选择器，因为我们一般默认id是唯一的 id = “div1” el = ‘#
Vue知识点总结
xfhgxhhhg的博客
08-02 6783
vue的知识框架。
Vue基础知识总结
xsq123的专栏
06-21 431
vue 基础知识
Vue 基础知识
天宇龙腾的博客
04-30 829
文章目录Vue.js1. 单向绑定2. 列表渲染3. 条件渲染4. 显示隐藏5. 事件处理6. 插入HTML内容7. 双向绑定8. 过滤器9. 计算属性10. 组件传值10.1. 父组件传值给子组件10.2. 子组件传值给父组件10.3. 兄弟组件之间传值11. 插槽12. 插件12.1. Router12.1.1. 导航守卫（地址拦截）12.1.2. Vuex13. 状态监听14. 生命周期15. 全局API16. 过渡动画17. 项目目录18. 安装辅助工具 Vue.js Web前端流行框架之一 ，使用
关于Vue的核心基础知识点
weixin_50443809的博客
05-04 1208
vue核心知识学习总结
Vue基础知识.pptx
04-25
Vue基础知识 本文将对Vue基础知识进行详细的...本文对Vue基础知识进行了详细的讲解和总结，涵盖了数据绑定、组件、指令、项目开发、生命周期、路由等方面的知识点，为读者提供了一个系统的和详细的Vue基础知识讲解。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值