talkyoung
commented
5 years ago Vue 快速安装一个vue模板 https://www.cnblogs.com/z45281625/p/9015380.html
node -v //(版本低引起：bash: npm: command not found) · npm -v //以上帮助检查是否安装 node npm · 输入vue //测试vue是否安装成功 · 输入vue list //看vue中有哪些子类 npm install vue · npm install -g vue-cli //全局安装vue-cli · vue init webpack projectName //生成项目名为projectName的模板，这里的项目名projectName随你自己写 （是的话 敲回车就行） //默认情况下，webpack安装的是最新版本的，如果要安装其他版本，使用命令行vue init webpack#1.0 ***就可以了。 注意：淘宝镜像语句，安装后npm速度更快，用的时候将npm都改成cnpm 在安装时会询问你: ①、Project name (sanfeng1)；项目名称（sanfeng1）。（确定按enter，否按N） ②、 Project description (A Vue.js project)；项目描述（一vue.js项目）。（随意输入一段简短介绍，用英文） ③、Author (sunsanfeng)；作者（sunsanfeng）。（确定按enter，否按N） ④、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere；Vue公司的建立（使用箭头键）>运行时+编译器：大多数用户推荐运行时间：约6kb轻民+ gzip，但模板（或任何Vue具体HTML）只允许在。VUE文件渲染功能是必需的其他地方。（按enter） ⑤、Install vue-router? (Y/n)；安装的路由？（/ N）。（可安可不安，以后也可以再安，根据需求选择） ⑥、Use ESLint to lint your code? (Y/n)；使用ESlint语法？（Y/ N）。（使用ESLint语法，就要做好心理准备，除非你非常懂ESLint语法，要不就会处处报错，我就被逼疯过，建议N） ⑦、Setup unit tests with Karma + Mocha? (Y/n)；设置单元测试？（Y / N）。（选N） ⑧、Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的测试？（Y / N）。（选N）
渐进式的js框架
注意： 使用{{}}调用方法的时候需要加（）。 但在事件里面如果方法不需要传参就不需要加（），因为vue能够识别。
Lession1 引用 这个是cdn
Lession2 new Vue({ 创建一个vue实例 el: '#vue-app', el:element 需要获取的元素，一定是html的根容器元素 data: { data:用于数据的存储 name: 'Shaun', webTag:”web” 将标签应用于数据的双向绑定 }, methods: { greet: function(time){ method：用于存储方法 return 'Good ' + time + ', ' + this.name; this：当前vue实例对象 } }, Computed:{ addA: function(){ return this.a + this.age; } });
将标签应用于数据的双向绑定 需要先定义一个标签
事件event v-on: 可以使用@ 代替 <button @click=””>
1、点击事件 2、双击点击事件 点击两次鼠标后将出发事件 3、鼠标移动事件 updateXY: function(event){ //console.log(event); 查看事件对象event的属性 This.x = event.offsetX; offsetX就是event对象的属性 This.y = event.offsetY; }
事件修饰符 对事件做相应的处理
·阻止单击事件继续传播
想想鼠标移动事件，当鼠标移动到被stop修饰的元素时，鼠标的XY坐标值将不会改变
·提交事件不再重载页面
键值修饰符 （键盘）
对键盘事件进行监听
enter表示只有触发enter这个按键才会触发submit函数
双向数据绑定 /input/select/textarea ·方式一： 需要和事件keyup进行联合使用 前端使用ref引用 Js中使用this.$refs.refvalue.value;进行赋值 ·方式二： 使用指令 v-model=”绑定属性名称”
计算属性 使用原因：计算使用method也可以，但在执行计算过程的时候需要匹配全局对象，即所有的计算方法都会被访问，由此浪费性能，为了减少开销而使用计算属性。 一般计算量特别大的时候才会使用computed。 具体的使用模板看上文格式。 注意：在使用计算属性的时候，前端的属性调用不要写（），和method不一样。
动态绑定css样式 使用v-bind ·方法一
false为不显示red；true为显示red ·方法二class的属性使用计算属性 这将返回多个属性 Computed:{ Return { Color1:this.color1, Color2:this.color2 } } v-if和v-show 区别：p标签是隐藏还是display：none V-for Data:{ Characters:[“talk”,”yang”], users:[ {name:”tao”,age:22}, {name:”yang”,age:32}, {name:”ainio”,age:12} ] } 使用:v-for=”char in characters” 获取下标：使用:v-for=”(char,index) in characters” {{index}} 也可以遍历对象 Template的使用 如果在div中使用v-for会造成添加重复的div块，浪费空间 如果使用template替换div，就不会在dom中添加div块 初识组件 组件的作用就是避免重复造轮子，把公共的代码提取出来。 类似于angularjs中的baseController。 注意：template中只能由一个根标签 Vue CLI脚手架 目录中各个文件的作用 Build 客服端 服务端 端口号 Static 存放静态文件 Index.html当前入口文件 Package.json 需要依赖的东西 Readme.md 提供一些指令 Src Assets图片 Components 组件 App.vue 根组件 Main.js 和index.html有关系 Import APP from ‘/APP.vue ‘ 引入组件APP Template:””因为引用了app组件，所以呢要在components里面进行申明 —>APP.vue 组件 Template 模板：html结构 Scritp 行为：处理逻辑 Style 样式：解决样式 跳到对应的文件夹下执行 npm install Npm run dev 全局组件注册 注册一次，到处使用 使用方法：
2019-7-23 第一次尝试issues