Vue入门学习总结一:Vue定义
Vue的功能是为视图提供响应的数据绑定及视图组件,Vue是数据驱动式的,不直接修改DOM而是直接操作数据实现对界面进行修改。
首先我们需要在script中定义一个Vue实例,定义方法如下:
var vm =new Vue({ el: '#app',props:{}data: { }, methods:{}, computed:{}, watch:{}, component:{}, template: {},directive:{},beforecreate:{}created:{},beforemount:{},mounted:{},filter:{}, //后面进行补充 })
以上除el外其他项均可为空,或直接不包含。
el:挂载点,通常我们会将Vue实例挂载点一个同id的Div,就像下面这个
<div id=”app”>
</div>
data:属性,采用键值对的方式进行声明。示例:
data: {
text:'123,456',
message: 'Runoob!'
},
在组件内部方法可通过this.text来访问text属性
另外data还可以使用外部声明的对象,比如如下语句:
var mydata =
{
site: "小牛",
url: "www.baidu.com",
alexa: 10000
}
var vm = new Vue({
el: '#vue_det',
data: mydata
})
此处与mydata对象为同一地址,修改会相互影响,可直接通过vm.site来进行访问。
props:参数,props 可以是数组或对象,用于接收来自父组件的数据。
<div id="app1"><child my-message="hello!"></child> //父组件中设置子组件参数<child :my-message=" message "></child> //子组件参数绑定到父组件中的message属性 </div> <script>Vue.component('child', {// 在 JavaScript 中使用 camelCase props: ['myMessage'],template: '<span>{{ myMessage }}</span>'})new Vue({el:"#app1",data:{message: 'Runoob!'}}) </script>
特别注意:js中用驼峰式命名,在html中需替换成短横线分隔式命名
methods:方法,提供可供内部或者外部调用的接口,可带参也可不带参,可有返回值也可没有返回值,示例如下:
不带参:
reverseMessage:function(){
this.message = this.message.split('').reverse().join('')
}
带参:
reverseMessage:function(num){
this.message = this.message+num
}
有返回:
reverseMessage:function(){
return this.message.split('').reverse().join('')
}
computed:计算属性,计算属性是一种只读属性,示例如下:
reverseMessage:function(){
return this.message.split('').reverse().join('')
}
会发现计算属性与有返回的Vue方法相似,不过区别在与,Vue方法在每次渲染均会重新运算,但计算属性只会在依赖项变化后才会重新运算。
watch:属性监听,可对实例的属性进行监听,出现变化便运行指定的方法,例如:
不带参:
message:function(){
this.text = this.text + this.message
}
带一个参:此时的参数val即为被监听属性message的新值
message:function(val){
this.text = this.text + val
}
带两个参:参数分别为被监听属性的新值和旧值
message:function(newval,oldval){
this.text = this.text + newval + oldval
}
另外我们还可以在Vue外部对属性进行监听,方式如下:
vm.$watch('kilometers', function (newValue, oldValue) {
、、、、//此处省略一万字
})
component:组件,提供模板,在Vue内部注册的为局部模板,方式如下
局部组件
可以在Vue外部定义一个模板变量,例如
var Child = { template: '<h1>自定义组件!</h1>' }
再在Vue内部进行声明,例如:
components: { // <runoob> 将只在父模板可用
'runoob': Child
}:
全局组件
在Vue外部定义全局的模板,例如:
Vue.component('runoob',{ template: '<h1>自定义组件!</h1>' })
这样在不同的Vue挂载点下均可以使用该组件,如何使用component呢,可以参考下面的示例:
<div id="app">
<runoob></runoob>
<h1>哈哈哈哈</h1>
</div>
另外component也是一个Vue实例,我们可以在里面添加参数props、方法methods等均可。
例如:
Vue.component('button-counter', {template: '<button v-on:click="incrementHandler">{{ counter }}</button>',data: function () {return {counter: 0}},methods: {incrementHandler: function () {this.counter += 1this.$emit('increment')}}, })
template:模板,如果为空,则挂载点下的元素就为模板,如果挂载点下元素不为空,则采用挂载点下的元素作为模板,即template模板无效,例如
template: '<h1>自定义组件!</h1>'
此时如果挂载点下包含元素,例如
<div id="app1">
<h1>dfsdfsdf</h1>
</div>
则该template无效,
directive:自定义指令,可以全局注册也可以局部注册,例如下面的示例,可以让DOM元素在加载时获取光标。
局部注册,挂载点默认加载时获得焦点
directives: {focus: {// 指令的定义inserted: function (el) {el.focus()}} }
也可以采用全局注册的方式:
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', {// 当被绑定的元素插入到 DOM 中时……inserted: function (el) {// 聚焦元素 el.focus()} })
然后通过在节点元素添加v-focus即可使用,例如:
<input v-focus>
生命周期
下面是一个有关生命周期的Vue示例,
var myVue=new Vue({el:"#app-8",data:{data:"aaaaa",info:"nono"},beforeCreate:function(){console.log("创建前========")},created:function(){console.log("已创建========")},beforeMount:function(){console.log("mount之前========")},mounted:function(){console.log("mounted========")},beforeUpdate:function(){console.log("更新前========");},updated:function(){console.log("更新完成========");},beforeDestroy:function(){console.log("销毁前========")},destroyed:function(){console.log("已销毁========")} })
不同的时间节点,页面所处的状态不一样,例如:
Beforecreate:Vue实例的挂载点及数据data均还未初始化
Create:Vue实例的数据data已经初始化,但挂载点还未初始化
Beforemounted:Vue实例的挂载点的DOM还是虚拟的,比如{{data}},就是虚拟DOM
Mounted:此时Vue实例的挂载点已经是真实的DOM。可进行有关挂载点节点的相关操作。
上诉即为Vue定义的内容,因为时间关系明天会对该博客进行补充,后面还将对Vue提供的语法进行讲解。
转载于:https://www.cnblogs.com/chenchaochao034/p/11305713.html
Vue入门学习总结一:Vue定义相关推荐
- vue入门学习(基础篇)
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
- Day7:Vue入门学习——传智播客学习笔记【微服务电商】
本节依旧是前端内容,但还是了解一下基础的入门知识 学习目标 会创建Vue实例,知道Vue的常见属性 会使用Vue的生命周期的钩子函数 会使用vue常见指令 会使用vue计算属性和watch监控 会编写 ...
- Vue入门学习(上)
本篇用作记录自己初次学习Vue的一个过程,尝试用自己的方式总结Vue的常用的用法,此次也是在自己通读了Vue的文档以后,做出的一些总结,对于vue-router,以及vuex不会涉及,当然会提到一些初 ...
- 一周Spring Boot + VUE 入门(2) --VUE
前后端分离目前重要的前端技术是基于VUE技术的框架进行开发. 1.前后端分离的概念 Vue.js(读音 /vju?/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用 ...
- 基于VueAxios制作音乐播放器(bilibili黑马程序员Vue入门学习记录)
目录 使用Vue制作一个音乐播放器 前言 Vue Vue导入 Vue挂载 Vue指令 v-text v-html v-on v-show v-if v-bind v-for v-model axios ...
- vue入门学习(一)
一.Vue起步 1.vue构造器 <div id="vue_det"><h1>site : {{site}}</h1><h1>url ...
- vscode + vue 入门学习
安装 1.1 需要安装node.js[可以查看vscode工具的学习] 下载地址:https://nodejs.org/en 查看安装的版本: 1.2 安装vue vue 的使用有俩种方式: 方式1: ...
- vue入门学习篇——父子组件通信
Vue父子组件之间通信的原理 父组件:props down -- 父组件通过props向下传递数据给子组件 子组件:events up -- 子组件通过事件events向上传递数据给父组件 下面我们来 ...
- Vue 入门学习视频教程
网盘视频链接:https://pan.baidu.com/s/1NjJkC_Zvx_ugvixSN_R2Kg 视频课程内容: 01 Vue的介绍 02 Vue环境搭建 运行项目 03 Vue目录结构 ...
最新文章
- 51nod 最长公共子序列测试 【LCS+回溯】
- 微信小程序打开红包的css_山海经攻略(微信小程序现金红包提现游戏)
- mysql count 类型_MYSQL的COUNT函数
- 不同坐标系下角速度_技术 | 西安80坐标与地方坐标系的转换方法技巧
- 『转载』|收藏|一张看懂AI知识体系
- java html中引入视频的格式_怎么在HTML网页中插入视频
- lora近几年发展的具体介绍
- LeetCode:位运算实现加法
- 标准输入输出(C++)
- AI、元宇宙技术方兴未艾,软件测试重装上阵
- js 基础 -- 循环、函数调用 、全局和局部变量、异常捕获、事件
- linux磁盘fio压力测试,fio命令 – 对磁盘进行压力测试和验证
- java怎么写程序_用Java程序怎么写?
- C++ Http下载文件
- android toast 自定义view,分享Android中Toast的自定义使用
- C语言解决三色旗问题
- 如何打造差异化抖音账号IP?
- Latex论文写作排版遇到的问题
- nc java 5.7,用友ERP NC v5.7 ——安装详解篇
- pcm系统设计及matlab仿真实现,PCM系统设计及MATLAB仿真实现