标签：删除元素 名称 配置 form module open 虚拟 script data
a) Import 一定不能放在函数内, 建议放在上方
b) Export 除了声明式的以外, 尽量放在代码的下方
a) Webpack-dev-server
b) 是一个服务器, 每次启动会分配意义端口, 类似与sublime server的一个工具
也可以结合 package.json文件中的script属性, 如果不记得, 执行的命令建议都是npm run脚本npm run 不能解决../操作 所以要用yarn (yarn run test)
1. 安装 npm i webpack-dev-server -D
2. 使用命令 ./或者是 ../node_mudules/.bin/webpack-dev-sever --inline --hot --open
Webpack里面的坑: 如果启动的目录所有上级文件夹名称包含{} [] , 自动刷新和热加载 替换功能失效, 不要在文件夹上加入特殊符号
Vue
a) 双向数据绑定 --> 数据劫持 --> 操作虚拟DOM
b) 用途 : 渐进视第一章(作为库使用的基本操作) --双向数据绑定功能
解决闪烁问题 v-bind v-cloak
引入包以后, 内部提供了一个vue对象
<div id=’app’>
<p v-cloak>{{msg}}</p> //双向数据绑定
<input typ=”text” name=”” v-bind: value=”msg”> //单向数据绑定
<input typ=”text” name=”” v-model=”msg”> //双向数据绑定
</div>
//引入包之后, 内部有一个vue对象
Var vm = new Vue({
el:’#app’, //跟页面上的id名是对应的 指定你要被控制的模板元素, 此时所有的操作可以在其内部发生影响
Data: { //在前端引包的
msg:’hello vue’ //相当于innerH
}
Template{ //可以传递一个字符串模板, 其中可以包含插值表达式{{xxx}} , 如果你当前给了template, 那么原来的元素将会被替换
}
})
Var msg = ‘124’; //数据劫持, 当vm原型上的属性发生了改变,此时
b) 搭建一个单文件vue项目
new Vue({
el: ‘#app’, //不建议el指定为html / body
data(){ //这里的data必须是一个函数, 返回值必须是一个对象 ,data () ES6函数声明的方式
return{} //声明了一个数据对象, 没有通过template这样的属性提示, 而是直接通过render渲染另一个单文件vue
},
render:function(creater) {return creater(app)}
//简洁版 render:c => c(app)
//声明了一个数据对象,
})
//第一部分
<template> //模板的位置, nebulizer是html内容和vue的一些变量的使用 {{xxx}}
<div class = “tmpl” > {{}}</div>
</template>
//第二部分
<script> //这个组件对象需要向外暴露
export dafault{ //向外暴露的
data{
return{ xx:’aaa’}
}
}
</script>
//第三部分
<style> //写css </style>
小结 : 入口 html -> 加入div标签加入id -> 不建议el指定为html / body 标签
Vue 常用指令
v-cloak 先让当前的隐藏掉, 解决闪烁问题
v-text 显示文本内容
v-if 元素是否隐藏 true/false , 是false代表没有
v-show 元素在页面中隐藏改变元素的style true/false只是将display: none,
v-model 双向数据绑定
v-bind 绑定一个属性 v-bind: 属性=”值”, 也可以操作data上的属性, 简写: + : 属性 = ‘值’
v-html 绑定的属性可以html里的标签
v-class ,灵活配置, 需要结合v-bind来完成,
v-for的使用
数组的for v-for=’(item ,index)in list’; (值,索引)
对象的for v-for=’(item ,key,index)in obj’; (值,键,索引), 如果给v-for绑定一 个key, v-for=”(item,index) in person”:key=”item.id”那么会让其在增加或者删除元素的时候, vue需要根据特定算法计算该对象的唯一标识, 而是直接用你指定的这个,提升性能
子组件使用
Components属性
当前组件和data属性是同一级的地方加上一个components属性, 其内部是一个对象, 可以有多个属性, 如果你属性名和属性的值, 用同一个的话, 可以简写 {componet1,componet2}, 组件建议使用首字母大写, 在js中如果你需要使用这个组件的 时候, 毫无疑问, 先__导入子组件__, 对于标签名, 开头的大写字母可以直接小写, 中间的大写字母可以加上-再小写
父向子组件传值
如果需要向子组件传值, 非常简单, 会有自己的$parent属性, 每 个组件对象如果有的情况下, 也会有自己的$children属性, 同名都是VueComponent对象
发射器
$on 当某个VueComponent对象调用 $on(‘eventName’,callback(msg){msg;})
$emit 上面那个函数在该对象调用的时候$emit的时候触发, 触发多次 this.$parent.$emit(‘eventName‘,‘haha‘);
$once 和on一样, 但是该事件的回调函数只会被触发一次
选项/什么周期钩子
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this与你期待的 Vue 实例不同， this.fetchTodos 的行为未定义。
Created
实例已经创建完成之后被调用, 在这一步, 实例已经完成以下的配置: 数据观测, 属性和方法的运算, watch/event事件回调, 然而挂载属性还没开始, $el属性目前不可见
Prop
组件的实例作用域是孤立的, 这意味着不能在子组件的模板内直接引用父组件的数据, 要让子组件使用父组件的数据, 我们需要通过子组件的props选项, 也可以向他传入一个字符串 <child message="hello!"></child> 最后输出 hello
标签：删除元素 名称 配置 form module open 虚拟 script data
原文地址：http://www.cnblogs.com/longsf/p/6658205.html
