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脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...
随机推荐
- 1139 First Contact PAT (Advanced Level)
原题链接: https://pintia.cn/problem-sets/994805342720868352/problems/994805344776077312 测试点分析: 首先来分析一下测试 ...
- Docker 封装java镜像
一.概述 目前java采用的框架是Spring,服务器直接通过 java -jar xxx.jar 就可以启动服务了. 二.jdk镜像 在docker中跑java应用,需要有jdk环境支持才行. 获取 ...
- ubuntu系统下防火墙简单使用
apt-get install ufw 安装防火墙sudo ufw enable|disable|status 开启/关闭/查看防火墙状态sudo ufw allow 22/ ...
- .NET 使用 ILRepack 合并多个程序集（替代 ILMerge），避免引入额外的依赖
原文:.NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖 我们有多种工具可以将程序集合并成为一个.比如 ILMerge.Mono.Merge.前者不可定制.运 ...
- Hadoop2.x 集群搭建
Hadoop2.x 集群搭建 一些重复的细节参考Hadoop1.X集群完全分布式模式环境部署 1 HADOOP 集群搭建 1.1 集群简介 HADOOP 集群具体来说包含两个集群:HDFS 集群和YA ...
- Tomcat组件梳理—Service组件
Tomcat组件梳理-Service组件 1.组件定义 Tomcat中只有一个Server,一个Server可以用多个Service,一个Service可以有多个Connector和一个Contain ...
- MySQL数据库之互联网常用分库分表方案
一.数据库瓶颈 不管是IO瓶颈,还是CPU瓶颈,最终都会导致数据库的活跃连接数增加,进而逼近甚至达到数据库可承载活跃连接数的阈值.在业务Service来看就是,可用数据库连接少甚至无连接可用.接下来就 ...
- Sublime Text3的安装（package control error 或者 there are no package available for installation等问题）
Sublime是一款非常好用的代码编辑器.Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,多种语言的插件,代码段等.还可自定义键绑定,菜单和工具栏.Sublime Text 的 ...
- Git查看某一个文件的历史提交信息
工作中我们有时候想要查看某一个文件的历史提交版本,] 还想看都修改过那些内容,那么这两个简单的命令就会帮到你了, 话不多说,comeBaby...... 1,首先查看一个文件的历史提交信息 git l ...
- 想知道使用OPC服务器时如何设置DCOM？看完本文就懂了（下）
接上文...... “安全”选项卡“安全”选项卡上,有3个选项需要设置. 启动权限 选择“使用默认值”选项 访问权限 选择“使用默认值”选项 配置权限 选择“自定义”选项,然后单击“编辑” 将打开一个 ...