vue基本使用及脚手架使用
一、基本使用：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body> <div id="app">
<ul>
<li v-for="(item,index) in list">{{item}}</li>
</ul>
<div ref="box" id="app111">{{message}}</div>
<button @click="handleUpdate()">修改数据</button>
</div> <button onClick="destory()">销毁</button>
</body> </html>
<!-- 必须导入的vue文件 -->
<script src="vue.js"></script> <script>
var vm = new Vue({
el: "#app",
beforeCreate() {
console.log("beforeCreate.....");
console.log(this.message)
},
created() {
console.log("created.....");
setTimeout(() => {
for (var i = 0; i < 10; i++) {
this.list.push(i);
}
this.message = "zhang"
}, 3000)
},
data: {
list: [],
message: ""
},
computed:{ },
beforeMount() {
console.log("beforeMount...");
console.log(this.$refs)
console.log(app.innerHTML)
},
mounted() {
console.log("mounted...");
console.log(this.$refs)
console.log(app.innerHTML)
},
beforeDestroy() {
console.log("beforeDestroy.....");
console.log(this.$refs)
console.log(app.innerHTML)
console.log(this.message)
},
destroyed() {
console.log("destroyed......")
console.log(this.$refs)
console.log(app.innerHTML)
console.log(this.message)
},
methods: {
handleUpdate() {
this.message = "张三" + new Date().getTime()
},
},
beforeUpdate() {
console.log("beforeUpdate");
console.log(app.innerHTML)
// console.log(app.innerText)
},
updated() {
console.log("updated")
console.log(app.innerHTML)
// console.log(app.innerText)
} }) function destory() {
alert(1)
vm.$destroy()
} </script>
1、计算属性与methods
/*
computed:
计算属性：通过属性计算得来的属性
只要属性发生变化那么该方法就会被调用
computed里面的方法调用的时候是不需要加() computed计算属性，如果属性的值没有变化的时候会从缓存中进行读取。而不是重新计算 methods:里面的方法每次调用的时候都会重新执行 相比较来说非常耗费性能 v-model.number:将字符串转换为数字
*/
2、methods 与 computed watch三者之间的区别
/*
methods 与 computed watch三者之间的区别 methods:里面书写的是方法，调用的时候需要加() 每次执行的时候内部所以的参数都会重新执行 computed:计算属性，当计算完毕以后会将计算的结果保存在缓存中，第二次在进行计算的时候
如果数据没有发生变化，那么会从缓存中读取结果。性能要比methods高.计算属性调用的时候是不
需要加()的 watch:监听属性的变化。watch是不需要调用的，只要属性发生了变化，那么就会接受到2个值
一个是新值 一个是旧值。watch是高频率事件 如果能用computed实现的功能尽量不要用watch
深度监听：监听对象的时候，增加deep：true */
另：属性监听<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<h3>我的名字叫{{fullName}}--------------{{names}}</h3>
<hr>
<input type="text" v-model="obj.name">
<input type="text" v-model="obj.age"> <button @click="handleDeep()">开始监听</button>
</div>
</body>
</html>
<script src="vue.js"></script>
<script> /*
属性监听
watch 当属性发生改变的时候用来监听属性的变化 watch里面的方法名字都是属性的key值
*/
var vm = new Vue({
el:"#app",
data:{
firstName:"",
lastName:"",
fullName:"",
obj:{
name:"张三",
age:22
}
},
methods:{
handleDeep(){
this.$watch("obj",()=>{
console.log("调用了")
},{
deep:true
})
}
},
computed:{
names(){
return this.firstName+this.lastName;
}
},
//能用computed解决的，尽量不用watch
watch:{
firstName(newVal,oldVal){ if(!/李/g.test(newVal)){
this.fullName = newVal + this.lastName;
} },
lastName(newVal,oldVal){
this.fullName =this.firstName+ newVal;
},
obj:{
handler(){
console.log("obj调用了")
},
//监听对象时需要深度监听，需要加deep:true
deep:true
} }
}) </script>
3、生命周期
/*
创建前
beforeCreate当初始化的时候读取生命周期函数，但是不能进行调用 created:当beforeCreate初始化完毕以后，会执行created。当执行created的时候会读取当前vm
身上所以的属性(把所有的属性都添加一个getter和setter方法)和方法遍历挂载到vue的实例身上。在created中可以访问到数据和方法了
(可以做的事情：ajax的请求) //outerHTML不是w3c的规范 beforeMount当执行beforeMount的读取到所有的虚拟DOM,和数据进行结合，但是没有生产真
正的DOm结构但是这里面是访问不到虚拟DOM的 mounted：挂载完成，在这里面虚拟DOM和数据结合完成后生成真正的DOM结构，在这里可以使用refs
进行dom的操作
使用一些插件进行实例化的时候我们都可以在这里面进行操作 例如 swiper better-scroll beforeDestroy：销毁前是可以访问到当前dom的元素，但是销毁后也就destroyed就不能访问到
dom元素了.把vm与DOM之间的关联全部断开 beforeUpdate:当数据进行修改的时候会执行beforeUpdate，但是数据不会立马进行更新，而是
数据和模板进行相结合的状态
updated数据和模板结合完毕生成新的DOM结构 后学新增：(keep-alive 包裹动态组件component 时)
activated： 当组件进入活跃状态的时候
deactivated: 当组件为缓存状态的时候 */
4、常用的实例化方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>年龄：{{age}}</p>
<p>姓名：{{message}}</p>
</div> <button onClick="add()">添加el</button>
<button onClick="destroy()">销毁</button>
<button onClick="forceUpdate()">强制更新</button>
</body>
</html>
<script src="vue.js"></script>
<script>
var vm = new Vue({
// el:"#app",
data:{
message:"李想"
}
})
vm.age = 19;
console.log(vm)
function add(){
//外部设置el 设置vue的作用域
vm.$mount("#app");
} function destroy() {
//销毁vm实例与DOM之间的关联
vm.$destroy()
} function forceUpdate() {
//如果说属性没有getter/setter方法的时候我们可以调用以下这个方法进行强制更新
vm.$forceUpdate();
}
</script>
二、脚手架的使用
<!--
全局安装：
npm install vue-cli -g
脚手架的安装：
vue init webpack-simple myapp (myapp 为要新建的文件名字)
后，按照黑窗口指令
cd myapp 切换到当前文件
npm install 或 cnpm install 安装依赖
npm run dev 运行
-->
之后，就可以正常使用喽
vue基本使用及脚手架使用的更多相关文章
- Vue 框架-10-搭建脚手架 CLI
Vue 框架-10-搭建脚手架 CLI + 批处理快捷启动 脚手架是通过 webpack 搭建的开发环境 使用 ES6 语法 打包和压缩 JS 为一个文件 项目文件在环境中,而不是浏览器 实现页面自动 ...
- Vue.js 在 webpack 脚手架中使用 cssnext
Vue.js 的 webpack脚手架默认已经使用了 PostCSS 的 autoprefixer 的功能. 如果想使用下一代 css语法,即cssnext: 1. 安装依赖 npm install ...
- Vue学习之vue-cli脚手架下载安装及配置
Vue学习之vue-cli脚手架下载安装及配置:https://www.cnblogs.com/clschao/articles/10650862.html 1. 先下载node.js,下载地址:ht ...
- day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui
Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui 本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 we ...
- day 84 Vue学习之vue-cli脚手架下载安装及配置
Vue学习之vue-cli脚手架下载安装及配置 1. 先下载node.js,下载地址:https://nodejs.org/en/download/ 找个目录保存,解压下载的文件,然后配置环境变量 ...
- vue/cli 3.0脚手架搭建
在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli 安装成功: 安装完成 ...
- 关于Vue的路由、脚手架笔记
在页面引入vue-router.js文件,开始配置路由 <div id="box"> <ul><li> <a v-link="{ ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
- webpack搭建vue项目，实现脚手架功能
本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...
随机推荐
- day50——js补充
day50 前端内容回顾 HTML 标签分类 块级标签:div p h1-h6 form hr br ul li ol table标签 内联标签:span a img label input sele ...
- 【题解】Luogu P5358 [SDOI2019]快速查询
原题传送门 神鱼说这道题是强制离线(smog 我们珂以把被单点修改,单点查询的点单独拿出来处理,把每个数表示成\(mul*x+plus\) 初始状态下\(mul=1,plus=0\) 操作1:在总和中 ...
- Gradle 翻译 build dependencies 依赖 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- SpringBoot中使用Interceptor
https://www.cnblogs.com/chao555/p/9573102.html 1.创建自定义的拦截器并实现HandlerInterceptor接口 package com.demo.c ...
- Java中Date、String、Calendar类型之间的转化
1.Calendar 转化 String //获取当前时间的具体情况,如年,月,日,week,date,分,秒等 Calendar calendat = Calendar.getInstanc ...
- JavaScript字符串转数值
JavaScript字符串转数值:方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数 js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成 ...
- CGContextRef&CGMutablePathRef&UIBezierPath简单学习
简单的四句介绍 Quartz是一个二维绘图引擎,使用的是CoreGraphics库,同时支持iOS和Mac系统 CGContextRef:获取图形上下文.或者叫作用域,即画布,他是专门用来保存绘画期间 ...
- loadrunner通过字符串左右边界提取字符串
/****** *函数名称:strcut *函数说明:通过左边界.右边界,从字符串中截取子字符串 *注意事项:会申请新的内存,需要手动释放 ******/ void strcut(char *strS ...
- Solr字段类型
一.一般属性 1.name fieldType的名称.该值用于字段定义中的类型属性,强烈建议名称仅包含字母数字和下划线,不能以数字开头[非强制]. 2.class 用于存储和索引此类型数据的类名.可以 ...
- day 04作业
目录 简述Python的五大数据类型的作用.定义方式.使用方法: 数字类型 字符串类型(str) 列表(list) 字典(dict) 布尔型(bool) 一行代码实现下述代码实现的功能: 写出两种交换 ...