021701vue概述基础语法

最新推荐文章于 2024-07-19 10:30:06 发布

老男人，

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量236

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_45889379/article/details/122990781

版权

一、Vue概述

1.什么是vue
官方网站 https://cn.vuejs.org
框架作者 尤雨溪
Vue是一个用于快捷开发前端应用的框架技术，它的特点用于构建用
户界面的前端渐进式框架，采用自底向上的逐层应用，只关于视图层，技术简单易于上手！
2.vue特点
构建用户界面：替代传统的网页设计开发技术，在项目中高效率构建网页
渐进式：不论是开发单个html页面还是开发多个页面组成的项目，或者基于Node的应用的项目Vue都提供了完善的技术支持
框架：framework，通过集成了html/css/js技术，搭建一套业务完整的包含数据处理流程以及功能函数的工具/代码集合
	库：library，一般描述的是函数或其他对象的集合
	框架：framework，一般描述的是包含界面，数据处理及功能函数的集合
自底向上逐层应用
关注视图层：Vue只对界面部分的处理进行了完善的支持
项目整合
单页面应用

二、编写第一个vue应用

先在官网下载vue.js

<body>
    <div id="app">
        <h1> {{ name }} </h1>
    </div>
    <h1> {{ name }} </h1>
    
    <script src="./vue.js"></script>
    <script>
        // 创建Vue实例，绑定页面中的一个标签
        const vm = new Vue({
            el: "#app", // 将实例绑定到一个标签上
            data: {     // 实例中的数据
                name: '作者：尤雨溪'
            }
        })
    </script>
</body>

在这里插入图片描述

三、vue第一个数据处理应用

<body>
    <div id="app">
        输入密码：<input type="text" v-model="passwd"><br />
        <p> 密码提取：{{ passwd }} </p>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app", // 绑定到制定的标签上
            data: {
                passwd: "待输入密码"
            }
        })
    </script>
</body>

在这里插入图片描述

四、vue实例选项

创建实例
const vm =new Vue({选项})

1.el:element缩写，表示实例绑定哪个标签，该标签内部的数据由Vue实例管理
2.data：数据的意思，用来声明当前Vue实例管理的所有数据
3.methods：函数、方法的意思，用来声明当前实例管理的所有函数
4.filters：过滤器的意思，用来声明按照条件进行数据处理的函数
5.created()/mounted()/updated()…生命周期选项
6.components：组件的意思，用来声明子组件

const vm=new Vue({
	el:"#app",
	data:{
	name:"Vue 2.x",
	version:"2.4"
	},
	methods: {
        say() {
            console.log("当前版本：2.4.0")
        }
    },
    filters: {
        format(args){
            return "拼接字符" + args
        }
    },
    created() {
        console.log("当前页面被创建的时候执行一下，处理一些准备数据")
    },
    components: {
        Headers,	// 添加页面头部组件
        Footers,	// 添加页面底部组件
    }
})

五、vue基础语法

1.差值表达式
是Vue中一种固定的语法：{{ 变量 }}，用于渲染输出变量的数据

<body>
    <div id="app">
        <p> {{ info }}</p>
        <p> {{ "插值表达式输出数据：" + info }}</p>
        <p> {{ info.toUpperCase() }}</p>
        <p> {{ reverse(info) }} </p>
        <p> {{ isLogin ? '尊敬的用户，冬奥会欢迎您' : '先做核酸'}}</p>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                info: "hello vue 2.x!",
                isLogin: false
            },
            methods: {
                reverse(str) {
                    return str.split('').reverse().join('');
                }
            }
        })
    </script>
</body>

在这里插入图片描述
2.指令
Vue中的一个功能组件，用来封装简单的DOM操作的
Vue中指令都是v-字符开头
v-text：将数据渲染到指定的标签中进行文本展示
v-html：将数据渲染到指定的标签中进行解释展示

<body>
    <div id="app">
        <p> {{ info }} </p>
        <p v-text="info"></p>
        <p v-html="info"></p>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                info: "<h2>谷爱凌</h2>"
            }
        })
    </script>

在这里插入图片描述
3.v-once
一般和插值表达式或者数据渲染指令结合使用，用于一次性渲染数据
如果页面中有一些数据加载渲染后不再发生变化，可以结合v-once指令进行操作

<body>
    <div id="app">
        <p v-once> {{ name }} </p>
        <p v-text="name" v-once></p>
        <p v-html="name" v-once></p>//在控制台不可修改
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                name: "哈哈哈"
            }
        })
    </script>
</body>

4.v-show v-if
v-show：根据判断条件是否为true，设置包含内容的显示/隐藏

v-if根据判断条件是否为true，设置包含内容的加载渲染/不加载渲染
v-show：通过display样式控制显示/隐藏
v-if：通过DOM操作加载/不加载控制显示/隐藏
5.v-bind
动态操作标签属性的指令，让标签属性可以接受变量数据
可以简化v-bind:attr="value"为：:attr=“value”
6.v-on
用于给标签添加事件处理的指令
v-on:click="fn"可以简化为@click=“fn”

<div id="app">
	<button v-on:click="mySay">点我</button>
	<button @click="mySay">点我</button>
	<input type="text" @keyup="record">
</div>
<script src="./vue.js"></script>
<script>
	const vm=new Vue({
		el:"#app",
		data:{},
		methods:{
		mySay(){
			alertt("用户点击了按钮")
        },
        record(e) {
                    console.log("用户输入了数据", e.target.value)
                }
            }
        })
    </script>

7.v-for
列表渲染指令，循环遍历集合数据，如数组中的多项数据
循环遍历的数据，每一条数据可能发生新增/修改/删除的操作，为了保持数据的状态需要添加一个key属性绑定数据状态
8.v-model
主要用于表单元素，用于数据双向绑定

<div id="app">
        输入密码：<input type="text" v-model="passwd"><br />
        <p> 密码提取：{{ passwd }} </p>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app", // 绑定到制定的标签上
            data: {
                passwd: "待输入密码"
            }
        })
    </script>

9.样式处理
标签的样式处理，一般包含行内样式(属性style)、和外联样式(属性class)完成样式修饰
class样式处理
对象格式：通过变量控制某个样式是否生效
数组格式：通过定义多个变量和样式名称映射的形式，使用数组表达式设置多个样式
style样式处理
对象格式
数组格式

<style>
        html, body{background:#ddd;}
        #title{text-align: center; line-height: 50px;width: 200px;height: 50px;background-color: white; color: black;}
        #title.active{background:orangered; color: white;}

        .dbg{background: #069;}
        .dfont{color: white;}
        .dfontsize{font-size: 22px;}
    </style>
</head>
<body>
    <div id="app">
        <div id="title" 
            :class="{active:isActive}" 
            @click="isActive=true">选项卡标题</div>

        <div :class="[dbg, dfont, dfontsize]">
            2022 中国冬奥运会
        </div>

        <hr>

        <div style="background-color: orangered;color: white;">哈哈哈</div>
        <div :style="{backgroundColor:sbackground, color: scolor, fontSize:ssize}">哈哈哈</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                isActive: false,
                dbg: "dbg",
                dfont: "dfont",
                dfontsize: "dfontsize",
                sbackground: "orangered",
                scolor: "white",
                ssize: "22px"
            }
        })
    </script>
   </body>

老男人，

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
021701vue概述基础语法

一、Vue概述1.什么是vue官方网站 https://cn.vuejs.org框架作者尤雨溪Vue是一个用于快捷开发前端应用的框架技术，它的特点用于构建用户界面的前端渐进式框架，采用自底向上的逐层应用，只关于视图层，技术简单易于上手！2.vue特点构建用户界面：替代传统的网页设计开发技术，在项目中高效率构建网页渐进式：不论是开发单个html页面还是开发多个页面组成的项目，或者基于Node的应用的项目Vue都提供了完善的技术支持框架：framework，通过集成了html/css/js技
复制链接

扫一扫