vue第一天认识vue与vue基本使用

认识vuejs

vue是一个渐进式的框架,渐进式意味着你可以将vue作为你应用的一部分嵌入其中,带来更丰富的交互体验

vue有很多特点和web开发中常见的高级功能

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

vue.js安装

网址:cn.vuejs.org
下载并将其引入到编辑器中,使用时引入到页面中就行

vue基本使用

需要提供标签
引入vue.js库文件
可以使用vue的语法做功能了
把vue提供的数据填充到标签里面
实例参数分析: el:元素的挂载位置(值可以是css选择器或者DOM元素)
data:模型数据(值是一个对象)
插值表达式用法:将数据填充到HTML标签中
插值表达式支持基本的计算操作{{}}
vue代码运行原理分析:概述编译过程的概念(vue语法->原生语法)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- 插值表达式 -->{{message}}</div><script src="./vue.js"></script><script>// 创建vue实例const vm = new Vue({el:'#app',//用于挂载要管理的元素data:{// 定义数据message:'你好呀,李焕英'}})</script>
</body>
</html>

vue模板语法

如何理解前端渲染:把数据填充到HTML标签中
前端渲染方式:原生js拼接字符串:
缺点: 不同开发人员的代码风格差别很大,随着业务的复杂,后期的维护变得逐渐困难起来
使用前端模板引擎:
优点:大家都遵循同样的规则写代码,代码可读性明显提高了,方便后期的维护
缺点:没有专门提供事件机制
模板语法:
指令: 1. 指令的本质就是自定义属性指令格式:以v开始
2. v-cloak指令用法:插值表达式存在的问题:‘闪动’,如何解决该问题:使用该指令,解决该问题的原理:先隐藏,替换好值之后在显示最终的值
指令用法:提供样式:[v-cloak]{
display:none;
}在插值表达式中添加该指令背后原理:先通过样式隐藏内容,然后在内存中进行样式的替换,替换好后在显示最终的结果
v-text填充纯文本；直接添加到标签中
v-html填充html片段:本网站内部数据可以使用,来自第三方的数据不可用缺点:存在隐患,易受到xss攻击
v-pre填充原始信息:显示原始信息,跳过编译过程(分析编译过程)
v-bind:动态绑定属性缩写: :bind
数据响应式:
如何理解响应式:html5中的响应式(屏幕尺寸的变化导致样式的变化)
数据的响应式(数据的变化导致页面内容的变化)
什么是数据绑定:数据绑定:将数据填充到标签中
v-once只编译一次:显示内容之后不再具有响应式功能

案例:简单计算器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input{outline: none;}</style>
</head>
<body><div id="app"><div class="jsa"> <label for="">数值A</label><input type="text" v-model='b'></div><div class="jsb"><label for="">数值B</label> <input type="text" v-model='a'></div><button v-on:click='handel' >计算</button><div>计算结果: <span v-text='result'> </span></div></div>
</body>
<script src="./vue.js"></script>
<script>var vm = new Vue({el:'#app',data:{a:'',b:'',result:''},methods:{handel:function(){this.result = parseInt(this.a) + parseInt(this.b);}}});
</script>
</html>

样式绑定

v-bind:class="{active:isactive}" {类名: 布尔值}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.active{color: red;}.error{font-size: 20px;}
</style>
<body><div id="app"><div v-bind:class="{active:isactive,error:iserror}">{{message}}</div><script src="./vue.js"></script><script>const vm = new Vue({el:'#app',data:{message:'你好呀',isactive:true,iserror:true}})</script>
</body>
</html>

v-bind:class="[activeClass,errorClass]"

<style>.active{color: red;}.error{font-size: 100px;}
</style>
<body><div id="app"><div v-bind:class="[activeClass,errorClass]">{{message1}}</div><script src="./vue.js"></script><script>const vm = new Vue({el:'#app',data:{message1:'长夜将至',activeClass:'active',errorClass:'error'}})</script>
</body>

v-bind:style="{css属性名:value}"

 <div id="app"><div v-bind:style="{color:'red',fontsize:'10px'}">{{message}}</div><div v-bind:style="[basestyle,errorstyle]">{{message1}}</div></div><script src="./vue.js"></script><script>const vm = new Vue({el:'#app',data:{message:'你好呀',message1:'长夜将至',basestyle:{color:'red',},errorstyle:{fontSize:'100px'}}})</script>

样式绑定相关语法细节:

对象绑定和数组绑定可以结合使用
class绑定的值可以简化操作
默认的class如何处理默认的不会被覆盖会被保留

计算属性

 <div id="app"><h2> {{fullname}}</h2></div><script src="./vue.js"></script><script>const vm = new Vue({el:'#app',data:{firstname:'Tom',lastname:'Jerry'},// 计算属性computed:{fullname:function(){return this.firstname + ' ' + this.lastname;}}})</script>

计算属性与方法的区别

计算属性是基于他们的依赖进行缓存的
方法不存在缓存
如果多次使用时,建议采用计算属性

vue第一天认识vue与vue基本使用相关推荐

Vue 第一天学习 ---2018.06.28
Vue 第一天学习 ---2018.06.28 1.引包 2.学会控制元素.显示数据,基本框架建立 <title>Document</title> <script sr ...
Vue第一部分(2)：数据的渲染
插值表达式数据绑定最常见的形式就是使用 {{值}} (双大括号)的文本插值: <div id="app"><h1>{{msg}}</h1>&l ...
vue中集合取第一个_快速学习Vue框架（知识点集合）
学习Vue的小伙伴速度看过来,快速学习Vue框架知识点集合贴来啦.建议收藏,尤其基础并不是很扎实的同学,本篇集合贴就是你日后工作的参考手册. 基础知识: ·vue的生命周期:beforeCreate/ ...
每日三道前端面试题--vue 第一弹
每日三道面试题--vue 第一弹 1.对vue渐进式框架的理解 2.v-if 和v-show的区别 3.MVC.MVP和MVVM的区别一.MVC 1.视图(View):用户界面. 2.控制器(Con ...
学习vue第一篇记录
首先,下载vue.js引入包里. 用到的文件可以从该网址引入:http://www.bootcdn.cn/vue/ 1.赋值 html: <div id="app" titl ...
Vue — 第一天（极速入门）
基本介绍 vue是什么目标:了解vue的一些基础概念. 官方网站: https://cn.vuejs.org/ vue是:渐进式javascript框架. 两组概念 (1)框架库.只提供一些API ...
Vue第一部分(6)：Vue的生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板.销毁等.Vue为生命周期中的每个状态都设置了钩子函数(监听函数).当Vue实例处于不同的生命周期时,对应的函数就 ...
Vue 第一天:模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...
Vue——第一节:初始Vue
1.什么是Vue Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合. ...

vue第一天认识vue与vue基本使用

认识vuejs

vue有很多特点和web开发中常见的高级功能

vue.js安装

vue基本使用

vue模板语法

案例:简单计算器

样式绑定

计算属性

计算属性与方法的区别

vue第一天认识vue与vue基本使用相关推荐

最新文章

热门文章

vue第一天 认识vue与vue基本使用

认识vuejs

vue有很多特点和web开发中常见的高级功能

vue.js安装

vue基本使用

vue模板语法

案例:简单计算器

样式绑定

计算属性

计算属性与方法的区别

vue第一天 认识vue与vue基本使用相关推荐

最新文章

热门文章

vue第一天认识vue与vue基本使用

vue第一天认识vue与vue基本使用相关推荐