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脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...
随机推荐
- DRF框架(四)——单整体改(put)、单局部改(patch)、群局部改(patch)
单整体改 单指的是单独一条数据,整体指这条数据的所有字段都必须传值修改 基于上篇文章的代码修改,序列化层不用变,只修改views.py 1) 单整体改,说明前台要提供修改的数据,那么数据就需要校验 ...
- ArcGIS Engine开发鹰眼图的功能（代码优化篇）
在上一篇,ArcGIS Engine开发鹰眼图的功能(基础篇) 上一篇的实现效果图如下, 如果仔细观察,会发现一个问题,即在“鹰眼”的区域,只要在红色线框内的注记会被覆盖. 如果红色框包括整张图的话, ...
- 手写ORM入门篇（一）
对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换 . ...
- 利用windows服务实现整点报时功能
程序语言:C# 实现目标:程序托管自动运行,每到整点播放语音报时. 准备素材:00——23点的整点报时声音文件. 实现过程: 1.新建windows服务项目 2.添加安装程序 3.设置服务属性 [添加 ...
- Python 将中文、字母转成数字
Outline 把中文汉字或者英文字母或者特殊字符转换成数字. (实质是字符转成对应ASCII码) 转换 将中文汉字转成数字: ord('单个中文汉字') 反转: chr(21704) 将英文字母转成 ...
- 2019 字节跳动java面试笔试题 （含面试题解析）
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.字节跳动等公司offer,岗位是Java后端开发,因为发展原因最终选择去了字节跳动,入职一年时间了,也成为了面 ...
- 【开发笔记】- 在MySQL中 root账户被锁定怎么办
MySQL的账户被锁定怎么办? 用Navicat连接数据库报错如下: Access denied for user 'root'@'localhost' (using password:YES) 原因 ...
- hexo更改主题
github+hexo搭建好个人博客之后,一般都挑选自己喜欢的主题.在这里为大家介绍一下比如何挑选主题以及如何修改主题. 主题选择: 1:知乎推荐 2:hexo官方 本地目录中打开git bash: ...
- 关于Python学习之 列表与字典
列表 列表是Python中最具灵活性的有序集合对象类型. # 列表迭代和解析 >>> res = [c*4 for c in 'Spam'] >>> res ['S ...
- 为了做好精益化，精益达选择了它？（MES应用案例）
企业介绍 郑州精益达汽车零部件有限公司(下文简称“精益达”)是宇通客车重要的业务组成部分,也是宇通集团重要的支柱业务之一,主要从事汽车零部件产品研发.制造.销售与服务.在郑州市拥有三个生产厂区,工艺技 ...