-
第一个vue程序启动 下一篇 vue（三）
- 文件目录(cal.js是不小心弄进来的，就当不存在，没啥用)
-
app.vue
<template> <div>我们的第一个vue程序</div> </template> <script> </script> <style></style> -
index.html
<!DOCTYPE html> <html> <head> <title>01_第一个vue程序启动</title> </head> <body> <div class="app">1111111111</div> </body> </html> -
main.js
var Vue = require('vue'); var App = require('./app.vue'); new Vue({ el:'.app', render:function(creater){ return creater(App) } }) -
package.js
{ "name": "02", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev":".\\node_modules\\.bin\\webpack-dev-server --inline --hot --open --port 8888", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "autoprefixer-loader": "^3.2.0", "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.4", "file-loader": "^0.11.2", "less": "^2.7.2", "less-loader": "^4.0.5", "style-loader": "^0.18.2", "url-loader": "^0.5.9", "vue-loader": "^13.0.4", "vue-template-compiler": "^2.4.2", "webpack": "^3.4.1", "webpack-dev-server": "^2.6.1" }, "dependencies": { "html-webpack-plugin": "^3.2.0", "vue": "^2.4.2" } } -
webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path') module.exports = { entry:{ //main是默认入口,也可以是多入口 main:'./src/main.js' }, //出口 output:{ filename:'./build.js', //指定js文件 path: path.join(__dirname,'dist') //最好是绝对路径 //代表当前目录的上一级的dist }, module:{ //一样的功能rules: webpack2.x之后新加的 rules:[ //require('./a.css||./a.js') {test:/\.css$/, loader:'style-loader!css-loader', //顺序是反过来的2!1 }, { test:/\.(jpg|svg|png|gif)$/, loader:'url-loader?limit=4096&name=[name].[ext]', //顺序是反过来的2!1 //[name].[ext]内置提供的，因为本身是先读这个文件 // options:{ // limit:4096, // name:'[name].[ext]' // } },{//处理ES6的js test:/\.js$/, loader:'babel-loader', //排除 node_modules下的所有 exclude:/node_modules/, options:{ presets:['es2015'],//关键字 plugins:['transform-runtime'],//函数 } }, { test:/\.vue$/, loader:'vue-loader' }, ] }, plugins:[ //插件的执行顺序是依次执行的 new htmlWebpackPlugin({ template:'./src/index.html', }) //将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录 ] }
-
执行 npm install ,产生node_modules目录，安装模块，然后执行npm run dev,成功打包后访问 http://localhost:8888/，页面为
- 常用指令
- vue中常用的v-指令演示
* v-text 是元素的innerText只能在双标签中使用
* v-html 是元素的innerHTML，不能包含<!--{{xxx}} -->
* v-if 元素是否移除或者插入
* v-show 元素是否显示或隐藏
* v-model 双向数据绑定，v-bind是单向数据绑定(内存js改变影响页面) - class结合v-bind使用
* 需要根据可变的表达式的结果来给class赋值，就需要用到v-bind:class="xxx"
* v-bind:属性名="表达式"，最终表达式运算结束的结果赋值给该属性名
- 简化的写法是: `:属性名="表达式"`
* class:结果的分类
- 一个样式: 返回字符串(三元表达式和key和样式的清单对象)
- 多个样式：返回对象(样式做key，true或flase做值) - methods和v-on的使用
* 绑定事件的方法
- `v-on:事件名="表达式||函数名"`
- 简写: `@事件名="表达式||函数名"`
* 函数名如果没有参数，可以省略() 只给一个函数名称
* 声明组件内函数，在export default这个对象的根属性加上methods属性，其是一个对象
- key 是函数名 值是函数体
* 在export default这个对象的根属性加上data属性，其是一个函数，返回一个对象
- 对象的属性是我们初始化的变量的名称
* 凡是在template中使用变量或者函数，不需要加this
* 在script中使用就需要加上this -
v-for的使用
* 可以使用操作数组 (item,index)
* 可以使用操作对象 (value,key,index)* key 是类似trank by 的一个属性
* 为的是告诉vue，js中的元素，与页面之间的关联，当识图删除元素的时候，是单个元素的删除而不是正版替换，所以需要关联其关系，设置(必须,性能)
* 2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。 -
父子组件使用
* 父和子，使用的是父，被用的是子
* 父需要声明子组件，引入子组件对象，声明方式如下```javascript
import 子组件对象 from './xxx.vue';{
components:{
组件名:子组件对象
}
}
```* 全局组件，使用更为方便，不需要声明，直接用
* 在main.js中引入一次，在main.js中使用 `vue.component('组件名',组件对象);`
* 所有的组件就可以直接通过组件名，使用 -
父传子
* 父组件通过子组件的属性将值进行传递
- 方式有2:
+ 常量: prop1="常量值"
+ 变量: :prop2="变量名"
* 子组件需要声明
- 根属性props:['prop1','prop2']
- 在页面中直接使用{{prop1}}
- 在js中应该如何使用prop1？ this.prop1获取 -
看文档的对象分类
* 1:全局的代表Vue.的
* 2:实例的代表this.或者new Vue().
* 3:选项代表 new Vue() 的参数
* 或者 export default里边的属性 -
子向父组件通信（vuebus）(扩展)
* 通过new Vue()这样的一个对象，来$on('事件名',fn(prop1,pro2))
* 另一个组件引入同一个vuebus, 来$emit('事件名',prop1,pro2)
-
总结
* 0 : 已经存在node_modules包，已经存在package.json和webpack.config.js文件
* 1: 创建index.html,看看其所在文件和webpack.config.js文件中描述的关系
* 2: 在index.html div->id->app
* 3: 创建main.js,看看其所在文件和webpack.config.js文件中描述的关系
* 4: 在main.js中引入vue,和相关组件对象
* 5: new Vue(选项options) , 目的地el 渲染内容 render:c=>c(App) 渲染App的内容
* 6: 编写app.vue
- template 在2.x以后只能有一个根节点
- script 格式是export default { 选项options}
- style 加上scoped（范围的）之后，样式只对当前模板有效
* 7: 可能使用组件或者使用函数或者接受参数
- options(根属性):
+ data 是一个函数,return一个对象
+ methods 是一个对象,key是函数名,value是函数体
+ components 是一个对象,key是组件名,值是组件对象
+ props 是一个数组,元素是多个接受的参数
* 8: 套路总结
- 凡是在上边可以使用的东西
- 在下边就可以使用，通过this.
* 9:启动
- 进入到webpack.config.js 和package.json文件同在的目录中启动命令行
- 输入: 正在编码: npm run dev
+ 报错: 检查命令所执行的../ 上级,是否存在node_modules目录及相关文件是否存在
- 输入: 代码编写完毕，提交到公司 : npm run build -
案例(指令案例)
-
目录结构
-
app.vue
<template> <div> <pre> *v-text *v-html *v-if *v-show *v-model </pre> v-text: <span v-text = "text"></span> <hr> v-html: <span v-html = "html"></span> <hr> v-if: <div v-if = "isShow" style="height:100px;background-color:red;"></div> <hr> v-show: <div v-show = "isShow" style="height:100px;background-color:red;"></div> <hr> v-model: <input type="text" v-model = "mtest"> {{mtest}} <hr> <input type="text" v-bind:value="mtest"> </div> </template> <script> export default{ data(){ return{ text:"我是v-text玩的东西", html:`<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>`, isShow:true, mtest:"haha", } } } </script> <style> </style> - index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>指令案例</title> </head> <body> <div id="app"> </div> </body> </html> - main.js
import Vue from "vue"; import App from "./app.vue"; new Vue({ el:"#app", render:function(c){ return c(App); } }) -
package.jaon
{ "name": "03", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev":".\\node_modules\\.bin\\webpack-dev-server --inline --hot --open --port 8888", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "autoprefixer-loader": "^3.2.0", "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.4", "file-loader": "^0.11.2", "less": "^2.7.2", "less-loader": "^4.0.5", "style-loader": "^0.18.2", "url-loader": "^0.5.9", "vue-loader": "^13.0.4", "vue-template-compiler": "^2.4.2", "webpack": "^3.4.1", "webpack-dev-server": "^2.6.1" }, "dependencies": { "html-webpack-plugin": "^3.2.0", "vue": "^2.4.2" } } -
webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path') module.exports = { entry:{ //main是默认入口,也可以是多入口 main:'./src/main.js' }, //出口 output:{ filename:'./build.js', //指定js文件 path: path.join(__dirname,'dist') //最好是绝对路径 //代表当前目录的上一级的dist }, module:{ //一样的功能rules: webpack2.x之后新加的 loaders:[ //require('./a.css||./a.js') {test:/\.css$/, loader:'style-loader!css-loader', //顺序是反过来的2!1 }, { test:/\.(jpg|svg|png|gif)$/, loader:'url-loader?limit=4096&name=[name].[ext]', //顺序是反过来的2!1 //[name].[ext]内置提供的，因为本身是先读这个文件 // options:{ // limit:4096, // name:'[name].[ext]' // } },{//处理ES6的js test:/\.js$/, loader:'babel-loader', //排除 node_modules下的所有 exclude:/node_modules/, options:{ presets:['es2015'],//关键字 plugins:['transform-runtime'],//函数 } },{//解析vue test:/\.vue$/, loader:'vue-loader',//vue-template-compiler是代码上的依赖 } ] }, plugins:[ //插件的执行顺序是依次执行的 new htmlWebpackPlugin({ template:'./src/index.html', }) //将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录 ] } -
执行 npm install ,产生node_modules目录，安装模块，然后执行npm run dev,成功打包后访问 http://localhost:8888/，页面为
个人认为，光看文档是没有用的，多敲点代码，理解下以下结构：
第三张图片id与第二张也就是main.js里的el对应，el的值为css选择器如：#id名、.类名。
-
总结：看代码是没有用的，实在不行，按着我的项目结构、代码都敲一遍，看看能不能成功，出现错误多去百度下，成长就是在不断的解决错误中。
扫一扫
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
