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脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...
随机推荐
- Go基础编程实践（九）—— 网络编程
下载网页 package main import ( "io/ioutil" "net/http" "fmt" ) func main() ...
- 【转】Isim——基本技巧
来源:电子产品世界: 注:本文由NingHeChuan本人多出整理所得,原文章图片不清晰,自己整理配图后重新发表 安装好ISE,系统已经自带了ISim仿真软件,相比于专业的仿真软件Modelsim,I ...
- Spring Boot与mybatis整合
完整的项目截图 一:pom依赖 新增ojdbc6及batis-spring-boot-starter依赖 <dependency> <groupId>com.oracle< ...
- mysql-配置与使用(跳过原始密码登陆)
目录 简单的使用步骤 环境变量的操作 配置文件的使用 查找进程 mysql 5.6 管理员密码的设置 简单的使用步骤 bin 下面有mysqld.exe 是服务端程序, mysql.exe 是客户端程 ...
- Matlab建造者模式
构建者模式又叫建造者模式(Builder),是将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示.创建者模式隐藏了复杂对象的创建过程,它把复杂对象的创建过程加以抽象,通过子类继 ...
- JavaScript 的内置对象和浏览器对象
JavaScript 中对象通常包括两种类型:内置对象和浏览器对象,此外用户还可以自定义对象. 在 ECMAScript 中,更精确的定义应该分为:本地对象.内置对象和宿主对象. 对象包含两个要素: ...
- 面试总结之Data Science
数据科学家面试如何准备? https://mp.weixin.qq.com/s/uFJ58az8WRyaXT2nibK02g 2020 年算法 / 数据分析面试数学考点梳理 https://mp.we ...
- 修复使用sub和sup时的行间距问题
sub和sup元素会轻微地增大行高. 幸好,用一点CSS就可以修复这个问题. 来自Nicolas Gallagher和Jonathan Neal的normalize.css(http://necola ...
- mysql 根据日期进行查询数据，没有数据也要显示空
写这篇博客主要是记录自己在对订单进行按日期查询时使用的一种查询的方法,这里的orders是订单表,你也可以改成别的什么表对于最终数据不会造成影响,除非你那个表的数据只有几条那样就会出现查不到日期的情况 ...
- ajax的五大步骤
什么是Ajax? AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. var btn = document.getElementsByTagName('button')[ ...