文章目录
一、安装nodejs
1、下载地址 https://nodejs.org/en/
2 、 安装nodejs
[nodejs安装详情]
3、安装成功后查看版本
node -v
二、Vue简介
1、vue安装
1、这里注意，如果想跑起来vue项目，首先要安装nodejs依赖环境
下载地址： https://nodejs.org/en/
2、命令行工具安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
查看版本。
vue --version
3、NPM安装
# 最新稳定版
$ npm install vue
2、vue简介
-
javascript框架
-
简化dom操作
-
响应式数据驱动
3、第一个vue程序
- 导入开发版本的Vue.js
- 创建Vue实例对象，设置 el 属性和 data 属性
- 使用简洁的模板语法把数据渲染到页面上。
4、el挂在点
-
vue实例的作用范围是什么呢？
Vue会管理el选项，命中的元素及其内部的后代元素。
-
是否可以使用其他的选择器？
可以使用其他的选择器，但是建议使用ID选择器
-
是否可以使用其他的dom元素呢？
可以使用其它双标签，但是不能挂在到HTML，BODY上。
5、data数据对象
data数据对象可以包含多种数据结构，例如属性，属性，对象等。
6、本地应用，vue语法
1、通过Vue实现常见的网页效果。。
2、学习Vue指令，以案例巩固知识点
3、Vue指令指的是，以**v-**开头的一组特殊语法。
-
内容绑定，事件绑定
-
v-text
-
v-text指令的作用是： 设置标签的内容（textContent)
-
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
-
内容支持表达式
-
-
v-html
-
v-html指令是设置innerHTML
-
内容中有html结构会被解析成标签
-
v-text指令无论内容是什么，只会解析成文本
-
-
v-on
- v-on指令的作用是为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在mehtods属性中
-
-
显示切换，属性绑定
-
v-show
-
v-show指令的作用是：根据真假值切换元的显示状态
-
原理是修改元素的display,实现显示隐藏
-
指令后面的内容可以是表达式，最终都会解析为布尔值
-
指为true元素显示，值为false元素隐藏
-
-
v-if
- v-if指令的作用：也是根据表达式的真假值切换元素的显示状态
- 本质是通过操作dom元素来切换显示状态
- 表达式的值为true,元素存在dom数中，为false,从dom中移除
- 频繁的切换使用v-show，反之使用v-if,前者的切换消耗小。
-
v-bind
- v-bind指令的作用：为元素绑定属性
- 完整写法v-bind:属性名
- 简洁写法 ：属性名
- 需要动态的增删class建议使用对象的方式
-
-
列表循环，表单元素绑定
- v-for
- v-for指令的作用是： 根据数据生产列表结构
- 数组经常和v-for结合使用
- 语法是(item,index) in 数据
- item 和 index 可以结合其他指令使用
- 数组长度的更新会同步到页面上，是响应式的，
- 数组添加数据push，删除数据shift，先进先出原则。
- v-on补充
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数
- 定义方法时需要定义形参来接受出入的实参
- 事件的后面跟上 . 修饰符可以对事件进行限制
- 例如keyup.enter 键盘事件监听
- 事件修饰符有多种 有关vue语法
- v-model
- v-model指令作用： 便捷的设置和获取表达元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据《–》表单元素的值双向关联
- v-for
7、小黑记事本实例练习
- 新增：
- 生产列表结构（v-for 数组)
- 获取用户输入 （v-model双向绑定）
- 回车新增数据（v-on.enter添加数据，事件监听）
- 删除
- 数据改变，和数据绑定的元素同步改变
- 事件的自定义参数
- 数组的splice()方法的作用 splice(start，num)，从start下标开始删除num个元素
- 统计
- 基于数据的开发方式，任务的条数，就是数组的长度。
- v-text指令的作用
- 清空
- 基于数据的开发 this.contentList = [] .
- 隐藏
- 复习v-show、 v-if指令的作用
8、网络应用，axios的使用
-
axios的get使用方式
首先要导入script依赖
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>axios.get(地址？查询字符串).then(function(response){},function(err){})
axios.get(地址？key=value&key2=value2).then(function(response){},function(err){})
-
axios的get使用方式
也要导入script依赖
axios.post(地址，参数对象).then(function(response){},function(err){})
axios.post(地址，{key：value，key2：value2}).then(function(response){},function(err){})
-
很重要的一点
就是get(地址?city=${this.city})这样拼接时不要使用单引号，要是用(``)
9、天知道天气预报的实现
- 点击查询
- v-on
- 获取数据
- 渲染数据
- 回车查询
- v-bind
- 获取数据
- 渲染数据
10、综合应用（悦听播放器）
-
歌曲的搜索
- 输入内容，按下回车（v-on.enter)
- 通过接口获取数据（这两步一下都有，就不重复了）（axios，v-model）
- 渲染数据(v-for数组 that )
- 歌曲搜索接口
请求地址:https://autumnfish.cn/search
请求方法:get
请求参数:keywords(查询关键字)
响应内容:歌曲搜索结果
-
歌曲播放
- 点击播放
- 点击暂停
- 歌曲url获取接口
请求地址:https://autumnfish.cn/song/url
请求方法:get
请求参数:id(歌曲id)
响应内容:歌曲url地址
-
歌曲封面
- 请求地址:https://autumnfish.cn/song/detail
请求方法:get
请求参数:ids(歌曲id)
响应内容:歌曲详情(包括封面信息)
- 请求地址:https://autumnfish.cn/song/detail
-
歌曲评论
热门评论获取
请求地址:https://autumnfish.cn/comment/hot?type=0
请求方法:get
请求参数:id(歌曲id,地址中的type固定为0)
响应内容:歌曲的热门评论 -
播放动画
- 通过设置css,设置 (:class = “{playging:isPlay}”)
-
mv播放
mv地址获取
请求地址:https://autumnfish.cn/mv/url
请求方法:get
请求参数:id(mvid,为0表示没有mv)
响应内容:mv的地址
11、计算属性和侦听器
-
计算属性computed：特点是数据联动，如果是vue实例的变量发生改变，就会重新计算。
例如： message，info
注意：arr 是实例之外的变量，如果其发生改变，不会重新计算，只有vue实例中的变量发生改变后，arr的值才回改变。
computed:{ message2:function(){ return 'computed:'+this.message+','+this.info+arr; } } -
侦听器watch：特点是异步场景，监听vue实例中的单个变变量，或者数组。只有当实例中的变量发生改变时，就会重新执行。
watch:{ message:function(newValue,oldValue) { onsole.log(newValue); console.log(oldValue); } },
12、vue-router，vuex的基本使用
-
vue-router:
export default new Router({ mode: 'hash', base: process.env.BASE_URL, linkActiveClass: 'active', routes: [ { path: '/', name: 'login', component: Login }, { path: '/home', name: 'home', component: Home, children: [ { path: 'list', name: 'list', component: () => import(/* webpackChunkName: "list" */ './views/List.vue') // 在history模式下使用懒加载会出现$router.push跳转失效问题 只能在hash/模式下使用 }, { path: 'user', name: 'user', component: () => import(/* webpackChunkName: "user" */ './views/User.vue') } ] }, { path: '/add', name: 'add', component: () => import(/* webpackChunkName: "add" */ './views/Add.vue') }使用方式
<router-link to="/about">About</router-link> 直接使用路径的方式li class="icons"><router-link :to="{ name: 'List'}">便签列表</router-link></li> 使用名称的方法 -
vuex 监控状态
state: { lists: [], users: [] }, mutations: { addItem (state, value) { state.lists.push(value) }, addUser (state, value) { state.users.push(value) }, getLocal (state) { if (localStorage.getItem('pageLists')) { state.lists = JSON.parse(localStorage.getItem('pageLists')) } }, getLocalUsers (state) { if (localStorage.getItem('users')) { state.users = JSON.parse(localStorage.getItem('users')) } } }, }如果别的views想传递数据到别的视图，可以使用如下方法，可以实现数据的传递
import store from '@/store/index.js' export default { store, data () { return { title: '', content: '' } }, methods: { add () { store.commit('addItem', { title: this.title, content: this.content }) this.title = '' this.content = '' this.$router.push('/home/list') } } }
三、Vue-Devtools 调试工具的安装
https://github.com/vuejs/vue-devtools#vue-devtools
# 1. 从github上面下载vue-devtools插件（或者选择克隆都是可以的）
# 一定要选择master进行下载
https://github.com/vuejs/vue-devtools
# 2. 将下载的vue-devtools-master进行解压
# 3. 进入到vue-devtools-master文件夹
cd vue-devtools-master
# 4. 安装配套的包
npm install
# 5. 压缩文件
npm run build
# 6. 修改 shells/chrome/mainifest.json 中的 persistant 为 true
# 7. 进入到chrome里面以加载已解压的扩展程序，选择vue-devtools-master/shells/chrome 文件
# 8. 进入到我们自己创建的vue项目中，在 main.js 文件里面添加一句话就可以正常执行了
Vue.config.devtools = true
原文链接：https://blog.youkuaiyun.com/hl120841/article/details/105541508
四、创建Vue项目
1、创建vue项目（1）
1、创建项目存放的目录
D:\vueStudyProjects\VueProject>md my-project
D:\vueStudyProjects\VueProject>cd my-project
D:\vueStudyProjects\VueProject\my-project>node -v
v12.16.2
D:\vueStudyProjects\VueProject\my-project>webpack -v
'webpack' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
- 如果发现出现这种webpack -v不是内部或外部命令的时候，那就是你要安装webpack
- 安装webpack
npm install webpack --save-dev - 安装cli
npm install webpack-cli --save-dev - 有关webpack解决问题的讨论
2、创建一个vue项目
D:\vueStudyProjects\VueProject\my-project>vue create app
Vue CLI v4.3.1
? Please pick a preset:
> default (babel, eslint) //选择这个
Manually select features
3、运行项目
- 进入刚创建的项目目录 cd app
- npm run serve --> 运行项目
- 访问地址如下，本地，线上都可以。
- App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.104:8080/
2、创建一个Vue项目（2）
vue ui
http://localhost:8000
扫一扫
1597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
