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脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...
随机推荐
- 【1】【leetcode-5】最长回文子串
给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad"输出: "bab"注意: " ...
- 01、MySQL_简介
数据库概念 数据库(Database)是按照数据结构来组织.存储和管理数据的建立在计算机存储设备上的仓库. 数据库:存储数据的仓库 数据库分类 网络数据库 网络数据库是指把数据库技术引入到计算机网络系 ...
- JDBC模糊查询的4种方式
1:%放在占位符中 parameters.add("%"+familyMemberQueryBean.getFullName()+"%" ...
- 英语DIAMAUND钻石指坚硬不可侵犯的物质
首先谈谈钻石和金刚石的名称.金刚石是一种天然矿物,是钻石的原石.习惯上人们常将加工过的金刚石称为钻石,而未加工过的称为金刚石(当然,有的金刚石不用加工便可应用).钻石是那些达到宝石级别的金刚石晶体切磨 ...
- js获取任意一天的0点和23:59:59时间
最近写代码时,需要获取任意一天的起始和结束时间,0点和23:59:59这两个时间的时间戳 使用了setHours() 方法 setHours() 方法用于设置指定的时间的小时字段 1. 获取当天开始时 ...
- 计算地图上两点间的距离PHP类
计算地图上两点间的距离,使用的是谷歌地图 <?php class GeoHelper { /** * @param int $lat1 * @param int $lon1 * @param i ...
- 爬虫入门urlib,urlib2的基本使用和进阶
python2中的urlib和urlib2 1.分分钟扒一个网页下来 怎样扒网页呢?其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优美的画面,但是其实是由浏览器解释才呈现出来的 ...
- 自定义View(一)，初识自定义View
看了无数资料,总结一下自定义View 先明白一个自定义View的三大流程 onMeasure() 测量,决定View的大小 onLayout() 布局,决定View在ViewGroup中的位置 onD ...
- H3C IEEE 802.11无线局域网工作组
- ss-套接字监控工具
ss(Socket Statistics) - another utility to investigate sockets(研究套接字的另一个实用程序,原先的是netstat) ss用于转储套接字统 ...