Vue基础语法（一）vue简介与几个方法

最新推荐文章于 2022-12-23 14:43:51 发布
最新推荐文章于 2022-12-23 14:43:51 发布
阅读量246 收藏 1
点赞数
文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36019490/article/details/90173515
版权

Vue

<head>
    <meta charset="UTF-8">
    <title>文本指令</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: darkgray;
        }
        .pg1 { background-color: red; }
        .pg2 { background-color: yellow; }
        .pg3 { background-color: blue; }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-if与v-show的变量值都是bool，控制着显隐 -->
        <!-- v-if隐藏时标签不被渲染，v-show隐藏时标签渲染，用display:none来隐藏 -->
        <!-- 特殊属性key是vue在内存中建立缓存的标志, 来优化渲染的效率 -->
        <p v-if="is_if" key="my_if">v-if的显示与隐藏</p>
        <p v-show="is_show" key="my_show">v-show的显示与隐藏</p>


        <p>
            <button @click="btn_click('pg1')">红</button>
            <button @click="btn_click('pg2')">黄</button>
            <button @click="btn_click('pg3')">蓝</button>
            <div class="box pg1" v-if="pg == 'pg1'" key="pg1"></div>
            <div class="box pg2" v-else-if="pg == 'pg2'" key="pg2"></div>
            <div class="box pg3" v-else key="pg3"></div>
        </p>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            is_if: true,
            is_show: true,
            pg: 'pg1'
        },
        methods: {
            btn_click: function (pg_num) {
                this.pg = pg_num
            }
        }
    })
</script>

# Vue:前台框架
# 渐进式JavaScript框架
# 渐进式：vue可以控制页面的一个局部，vue也可以控制整个页面，vue也能控制整个前端项目
#      -- 根据项目需求，来决定vue控制项目的程度

使用方式简介

# 1.下载：https://vuejs.org/js/vue.min.js
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 
# 2.导入vue.js
<script src="js/vue.min.js"></script>

# 3.在自定义的script标签中创建vue对象
new Vue({
el:...
data:..
}）

# 4.用vue对象来控制页面内容
	在script脚本内实现

vue的优点

'''
单页面web应用
数据驱动
数据的双向绑定
虚拟DOM
'''

挂载点与数据的渲染

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div id="app">
        <!-- 插值表达式：插值表达式中出现的名字代表vue变量 -->
        <div class="root">{{ abc }}</div>
        <div class="main">{{ xyz }}</div>
    </div>
</body>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        // 挂载点：vue对象通过el参数(挂载点)与页面结构建立联系，vue对象与页面控制的结构应该是一对一关系，所以挂载点选择id作为唯一标识
    	el: '#app',
       	// 在挂载点插值表达式中出现的名字是变量，需要vue对象通过data提供
        data: {
            abc: '内容',
            xyz: 3.14
        }
    })
</script>

vue实例

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="app">
        <!-- 插值表达式：插值表达式中出现的名字代表vue变量 -->
        <div class="root">{{ abc }}</div>
        <div class="main">{{ xyz }}</div>
    </div>
</body>


<script>
	new Vue({
		e1:'#app'，
		data:{
			abc:'内容',
			xyz:'111'
		}
	})
</script>

methods绑定事件

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/vue.min.js"></script><head>
    <meta charset="UTF-8">
    <title>Title</title>
<head>
</head>
<body>
<div id="app">
    <!-- v-on来为事件绑定方法，事件用 :事件名 标注 -->
    <!-- 语法：v-on:事件名 = "事件变量" -->
    <!-- 事件变量：由vue实例的methods提供 -->
    <button v-on:click="btnClick">{{ msg }}</button>
</div>
</body>


<script>
   new Vue({
	   el: '#app',
        data: {
		     msg: "按钮"
        },
	   methods: {
	   btnClick: function() {
	   alert ('this is alert')
   }
   }
   })
</script>

案例：通过事件修改标签样式

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 通过不同的类名控制着一套css样式 */
        .btn {
            width: 100px;
            height: 40px;
            background: orange;
        }
        .botton {
            width: 200px;
            height: 80px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-bind来为属性绑定变量，属性用 :属性名 标注  eg:  :style  :class  :id -->
        <!-- 语法：v-bind:属性名 = "属性变量" -->
        <!-- 事件变量：由vue实例的data提供 -->
        <button v-on:click="btnClick" v-bind:style="my_style" v-bind:class="my_cls">{{ msg }}</button>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: "按钮",
            my_style: {
                // background: 'transparent'
            },
            my_cls: 'btn'
        },
        methods: {
            btnClick: function () {
                // console.log(this.my_style.background)
                // this.my_style.background = 'yellow';
				// 修改类名就能直接对应一套css样式
                if (this.my_cls == 'btn') {
                    this.my_cls = 'botton'
                } else {
                    this.my_cls = 'btn'
                }
            }
        }
    });
</script>
</html>

案例：通过事件修改标签样式

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 通过不同的类名控制着一套css样式 */
        .btn {
            width: 100px;
            height: 40px;
            background: orange;
        }
        .button {
            width: 200px;
            height: 80px;
            background-color: yellowgreen;
        }
		.body1{
			background: #FF0004;
		}
		.body2{
			background: #F6FC0A;
		}

    </style>
</head>
<body>
    <div id="app">
        <!-- v-bind来为属性绑定变量，属性用 :属性名 标注  eg:  :style  :class  :id -->
        <!-- 语法：v-bind:属性名 = "属性变量" -->
        <!-- 事件变量：由vue实例的data提供 -->
        <button v-on:click="btnClick"  v-bind:style="my_style" v-bind:class="my_cls">{{ msg }}</button>
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
	el : '#app',
	data:{
	msg:'点击按钮',
	my_cls:'btn',
           // my_style: {
           //      background: 'transparent'
           //  }
},
		methods:{
		btnClick:function(){
	if (this.my_cls == 'btn'){
		this.my_cls = 'button'
	}else{
		this.my_cls = 'btn'
	}
}
		}
});
</script>
</html>

实例的computed

computed功能：将function封装给一个变量，通过该变量就可以得到该function的返回值
应用场景：一个变量(name)依赖于 多个变量(first_name + last_name)的值

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
<div id="app">
    <!-- v-model就是为表单元素 value属性 绑定变量 -->
    <p>
        姓：<input type="text" placeholder="姓" v-model="first_name">
    </p>
    <p>
        名：<input type="text" placeholder="名" v-model="last_name">
    </p>
    <p>
        <!-- 插值表达式中可以书写  变量表达式 -->
        姓名：<span class="span">{{ name }}</span>
    </p>
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
    el:"#app",
    data:{
        first_name:'',
        last_name:''
    },
    computed:{
        name:function () {
            if(this.first_name == '' && this.last_name == ''){
                return '姓名'
            }
            return this.first_name + this.last_name
            }
        }


});
</script>

实例的watch方法

watch是用来监听变量的，当监听的变量的值一旦发生变化，就会触发监听的函数
应用场景：多个变量(first_name、last_name)依赖于一个变量(name)

<div id="app">
    <p>
        姓名：<input type="text" placeholder="姓名" v-model="name">
    </p>
    <p>姓: {{ first_name }}</p>
    <p>名: {{ last_name }}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: "",
            first_name: "姓",
            last_name: "名",
        },
        watch: {
            name: function () {
                // eg: name = “张三”
                this.first_name = this.name[0];  // 张
                this.last_name = this.name[1];  // 三
            }
        }
    });
</script>

在这里插入图片描述

实例的delimiters

<body>
    <div id="main">
        <!-- 查找表达式 {{ }} 符号与其他语言冲突，可以自定义表达式的符号 -->
        <!-- 实例的 delimiters: ['左侧符号', '右侧符号'] -->
        {{ msg }}{{{ msg }}}${ msg }
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    // vue实例(对象)
    new Vue({
        el: '#main',
        data: {
            msg: "信息"
        },
        // delimiters: ['{{{', '}}}'],
        delimiters: ['${', '}'],
    });
</script>

实例的生命周期钩子

学习目的：
#钩子：满足某种条件被（系统）调用的方法
在一个vue实例，从创建到销毁，整个过程中或产生一些时间节点，这些时间节点都会回调一些指定名字绑定的方法，在这些函数中去完成特点时间点的业务功能

new Vue({
    el: '#app',
    data: {
        msg: "message"
    },
    methods: {
        fn: function () {
            return '123'
        }
    },
    beforeCreate: function () {
        console.log('实例要被创建了');
        console.log(this.msg)
    },
    created: function () {
        console.log('实例已经创建了');
        console.log(this.msg);
        console.log(this.$el)
    },
    mounted: function () {
        console.log('实例已经渲染到页面');
        console.log(this.msg);
        console.log(this.$el);
        console.log(this.fn)
    },
    '生命周期钩子名': function () {
        console.log('该时间点需要完成的业务逻辑');
    },
});

生命周期参考：
https://cn.vuejs.org/v2/api/#选项-生命周期钩子

不会玩csdn
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础语法练习源码
12-09
本套资源，是在html文件中测试的一些vue基础语法，包括过滤器、定义插件、列表渲染等语法。此资源适用于初学vue的小伙伴，用于加深对vue语法的熟悉。
Vue.js 基础语法简介，入门级基础语法
05-19
Vue.js 是一个构建用户界面的渐进式框架。它的核心库只关注视图层，易于上手并与其他库或已有项目整合。本文简要介绍 Vue.js 的部分基础语法，如条件语句、循环语句、计算属性、样式绑定、事件处理器、表单、组件、...
Vue.js的几个简单属性方法
流星雨的博客
11-22 404
v-bind:title 获取鼠标焦点并给出解释（出现一个对话框） v-if 控制切换一个元素的显示 v-for 指令可以绑定数组的数据 v-on 指令绑定一个事件监听器 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定 v-show 写css样式的 v-else 必须跟在if或show后面
Vue语法简介（入门推荐）
NXBBC的博客
03-01 3043
vue简单语法介绍和简单实例
vue语法简述
wzq_boy的博客
03-01 213
vue介绍 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 vue注意事项 Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 构建Vue实例 new Vue{{
VUE基础语法介绍
weixin_45841394的博客
01-25 143
** 模板语法 ** Mustache语法：{{msg}} 这个和Angular双向数据绑定语法是一样的，这个msg需要在data里面去定义，模板便可使用 Html赋值：v-html=“” 这个和JQuary的.html语法函数方法是一样的，可在get里面定义一个字符串，字符串里面包括html标签，他会把这个标签当作标签来进行输出而不是 当做文本输出 绑定属性：v-bind：id=“”...
vue的七个属性，八个方法，七个指令
weixin_44074051的博客
08-06 3525
vue的七个属性，八个方法，七个指令 七属性 el：元素，标识vue语法的开始 data：数据 method：方法，存放js方法 temple：模板，用来设置模板，会替换页面元素，包括占位符。 render: 渲染器，会创建virtual Dom, computered:用来计算 watch：用来监听， watch:function(new,old){} 监听data中数据的变化 两个参数，一个返回新值，一个返回旧值 <div id="app"> {{m
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
又一款MVVM组件 Vue基础语法和常用指令（1）
11-29
前言：关于Vue框架，好几个月之前就听说过，了解一项新技术之后，总是处于观望状态，一直在犹豫要不要系统学习下。正好最近有点空，就去官网了解了下，看上去还不错的一个组件，就抽空研究了下。最近园子里vue也确实...
Django与Vue语法的冲突问题完美解决方法
12-29
当我们在django web框架中,使用vue的时候,会遇到语法冲突. 因为vue使用{{}},而django也使用{{}},因此会冲突. 解决办法1: 在django1.5以后,加入了标签: {% verbatim myblock %} {% endverbatim myblock %} 被此标签...
Vue入门
BAIQW的博客
07-07 668
vue是一个构建用户界面UI的渐进式javascript框架，渐进式的框架是指可以一步一步的由浅入深的去使用这个框架，该框架可以逐步引入项目。作者：尤雨溪vue官网 https://cn.vuejs.org/1.体积小 压缩后33k左右，体积小意味着下载速度很快。运行快，数据传输快。2.更高的运行效率 基于虚拟dom，一种预先通过javascript进行各种计算，把最终的DOM操作计算出来并进行优化的技术。所谓虚拟dom指的是对真实dom的一种模拟。相对于直接操作真实dom，我们构建一棵虚拟的dom树，将各
VUE常用方法
kusse的博客
12-23 1415
VUE常用方法,基本上常用的方法都包含了。
el与data的两种写法
李公子的博客
07-25 242
data与el的2种写法 1.el有2种写法 (1).newVue时候配置el属性。 (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。 2.data有2种写法 (1)...
vue常用方法总结
LiChengzhong的博客
07-08 1402
1、常用工具类 2、本地存储工具类 常用工具类 tool.js /* * 验证手机号是否合格 * true--说明合格 */ export function isPhone(phoneStr){ let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; if (!myreg.test(phoneStr)) { return false; } else { return true; } } /* * 验证身份证号是否合
Vue 指令的八个方法
dengshengxin的博客
05-23 1102
指令 Vue 指令 组件 作用： 是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM 以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM 这个指令需要模板语法的支持，所以我们采用jsx语法糖 指令 格式： v-xxx = “mustache语法” v-xxx = “msg” v-xxx = “{{msg}...
Vue没反应，原来是el 不是e1
zrcshendustudy的博客
04-25 1050
 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;Vue 测试实例 - 菜鸟教程(runoob.com)&lt;/title&gt;&lt;script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js&
Vue.js框架入门之vue简介和基本语法(一）
Emoji的博客
04-17 1084
Vue.js学了有一段时间了，现在把知识点复习和整理一遍，以免遗忘 目录 一、MVC、MVVM模式简介 二、Vue.js简介 三、vue.js的安装 1、直接用 script引入 2、CDN引入 3、NPM安装 代码演练 四、Vue 实例 1、创建一个Vue实例 代码演练 2、数据与方法 代码演练 3、生命周期 代码演练 一、MVC、MVVM模式...
vue中methods一个方法调用另外一个方法
热门推荐
zhangjing1019的博客
09-12 8万+
vue在同一个组件内； methods中的一个方法调用methods中的另外一个方法 可以在调用的时候 this.$options.methods.test2(); this.$options.methods.test2();一个方法调用另外一个方法； new Vue({ el: '#app', data: { test:111, }, methods
vue框架介绍及语法
yangzhanghui的专栏
10-31 2676
一、什么是Vue？ 为了实现前后端分离的开发理念，开发前端 SPA（single page web application） 项目，实现数据绑定，路由配置，项目编译打包等一系列工作的技术框架。 二、如何使用？ 直接下载vue.js引入到网页中即可。 Vue.js 官网下载地址：http://vuejs.org/guide/installation.html 三、基础语法： 1、双向绑定
0基础学vue2还是vue3
最新发布
06-07
学习Vue2主要需要掌握以下几个方面： 1. Vue的基础语法：包括模板语法、数据绑定、计算属性、指令等。 2. 组件：Vue2是一个组件化开发的框架，组件是Vue2中最基本的开发单元，需要掌握组件的生命周期、props、事件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值