充实的啊
计算属性与侦听器
计算属性 computed
侦听器 wathch
使用场景介绍
为什么听了老师讲的课程,我对v-bind和v-on用法更深刻了
讲的ok哈
一览众山小
老师讲的不错,我想可以按照这个,自己出一个vue3视频了笑脸
项目打包使用命令:npm run build
打包完成后生成dist文件夹,部署到服务器即可
webpack打包配置相关
以及环境变量和模式配置
vue2.x入门
创建工程的两种方法:
方法一:vue create 命令创建
cd 到某需要创建工程的目录
创建名为hello-world的项目:vue create hello-world
方法二:ui界面创建
使用命令vue ui
并用浏览器打开对应http:localhost:8080地址
选择Create创建项目,选择Create a new project创建新项目
项目创建成功可查看左侧边栏一些插件、依赖、目录、任务等
可视化运行,点击运行,同npm service
工程项目目录结构:主键目录、package.json
先安装node和npm
然后安装vue-cli工具: npm install -g @vue/cli
查看vue-cli版本:vue --version
条件渲染,定时触发或其它满足的条件触发等。
列表渲染
Classs与Style绑定
v-if ,v-else,v-else-if 示例:
v-show 条件满足才显示
v-for简单基础使用,对上数组输出
v-for与条件渲染一起过滤使用
v-for与v-show一起过滤使用
触发computed的条件是本实例里面的data数据发生变化。
如果只有外部arr对象变化不会触发改变。
监听属性,监听器,异步场景,异步请求返回触发:watch
计算属性,数据联动:computed
IDE:
WebStorm
VSCode
nvm
课程主要内容
aaaa
部署命令:npm run build;
new Router({
// 路由激活添加属性
linkActiveClass: 'styleName'
})
git clone
git status
git add .
git commit -m ‘first commit’
git remote -v
git push origin master
git branch -a
git checkout -b dev
git push origin dev
git checkout master
git merge dev
git branch -D dev
git push origin :dev
git reset --hard head^
git log
git reflog
git reset --hard HEAD@{1}
通过浏览器调试工具network 下的模拟网络,进行加载loading 或者加载效果 的测试,如:设置slow 3g 模拟网络慢进行调试。
浏览器console 输出调试,可设置全局变量调试,方法如下:
mounted(){
window.vue=this;
}
chrome vue开发插件
git clone git@github.com:kanlidy/hellogit.git 创建一个空仓库
git status
git branch -a
git branch
touch test.txt
git add.待处理待提交的状态
git commot -m "初次提交"
git remote -v
git push origin dev
git checkout master
ls
定义store,引入Vuex文件
定义state和mutations
引入store文件
在对象中引用store
.commit
cd 进入文件夹
Vue create 文件名
敲空格选择选项
ctrl+c取消安装
npm install --global vue-cli
cnpm install -g vue-cli
npm install -g @vue/cli升级
vue ui
<div v-for="items in list" v-bind:style='styleMsg'{{items.name}}</div>
>
el,元素绑定
var app = new Vue({
el:"#app"
data:{
msg: "hello vue",
another:"another hello vue"
},
watch{
msg:function(newval,oldval){
console.log(newval)
console.log(oldcal)
}
},
computed:{
msg1:function(){
return"computed"+this.msg+","+this.anthor}
},
})
{{msg}}插入变量,插值语法
v-bind;
onclick;
v-if;
:herf;
{{msg}}
new Vue ({
el:'#app',
data:{
masg:'hello vue!!'
}})
绑定元素
上BootCDN上查找
单独页面demo