-
<script type="text/javascript" src="https://cdn.fastadmin.net/assets/addons/ask/js/all.min.js?v=1.0.95" merge="true"></script>
aaaaaaaaaaaaaaaaaaaaa
<script type="text/javascript" src="https://cdn.fastadmin.net/assets/addons/ask/js/all.min.js?v=1.0.95" merge="true"></script>
查看全部 -
环境和工具介绍
开发工具：WebStorm或者VScode，推荐使用WebStorm，因为它可以集成更多的开发工具在里面（比如Git终端，而且有图形化界面，操作方便），VScode也提供了一些智能化的插件，免费的、微软开发的编辑器，有语法高亮、语法提示，以及版本控制都可以集成在该编辑器里。
开发环境：Node.js。
nvm介绍：node的版本管理工具（前端依赖库之间的兼容性问题）。
——nvm命令——
nvm --version查看nvm版本
nvm --help查看帮助
nvm ls查看本地安装node版本
nvm ls-remote查看nvm服务器上有哪些版本
nvm install v11.0.0安装某版本的node
nvm use v8.12.0切换nvm版本
注意：下载npm包时，可以通过设置镜像为淘宝的镜像，可以下载快一些。命令为：npm install -g cnpm --registry=https://registry.npm.taobao.org。这样以后下载前段依赖时就会很快。
调试环境：推荐使用谷歌.
vue的Chrome插件：下载网址https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd（谷歌可以很方便查看vue组件的状态）
工程环境：vueCli工具，下载命令npm i -g vue-cli，查看vue版本vue --version
查看全部 -
查询node版本：node -v
查询npm版本：npm -v
全局安装vue-cli工具：npm install -g @vue/cli
查询vue-cli版本：vue --version
创建vue工程一：
进入创建工程的目录下面
vue create hello-world
敲空格选择：Router，Vuex，CSS Pre-processors
history：yes
CSS Pre-processors：Sass/SCSS
Airbnb config
保存时对代码做检查
默认配置
以后的项目按照以上步骤创建--NO
创建vue工程二：
vue ui
查看全部 -
F12开发者工具-console窗口。通过var vm = new VUE({....}) vm.属性名来调试属性值或者参数值。
绑定class:
混合模式：
:class="{'msg','color',{'big':item.big>0}}"
简单模式：
:class="{'color':true}" 或者 :class="{'msg','color'}"
绑定style:
:
查看全部 -
Vue:绑定属性和事件：
属性：v-bind: 缩写为“：”冒号
事件：v-on: 缩写为“@”艾特
查看全部 -
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue练习</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.common.dev.js"></script> </head> <body> <div id="app"> <h1>你好</h1> <div class="bg"> {{msg}} </div> {{ count }} {{(count+2)*10}} <div id="bi"> <a v-bind:href="url">百度</a> </div> <div v-html="template"></div> <button type="button" v-on:click="submit()">加</button> </div> <script> new Vue({ el: '#app', data: { msg: 'hello vue!!', count: 0, url: 'https://www.baidu.com', template: '<div>你好磨课+++</div>' }, methods: { submit :function(){ this.count++; } } }) </script> </body> </html>查看全部 -
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue练习</title> <script src=" </head> <body> <div class="bg" id="app"> <h1>你好</h1> {{msg}} </div> <script> new Vue({ el:'.bg', data:{ msg:'hello vue!!' } }) </script> </body> </html>查看全部 -
nvm安装
Chrome浏览器vue调试工具安装
nhdogjmejiglipccpnnnanhbledajbpd
查看全部 -
关于vue的一些问题查看全部
-
新建views/xx.vue
router.js
import xx from '../views/xx.vue'
{path：
name:
component:
}
App.vue
<router-link to="/xx">xx</router-link>
查看全部 -
创建：cmd>vue create 或者 vue ui
目录：public/src/package.json
查看全部 -
watch (异步场景：监听一个变量/常量的变化）
computed（数据联动：Vue实例中的多个变量，Vue实例中变量变化时将全局触发）
watch: {
msg: function(newval, oldval) {
console.log("newval is:" + newval)
console.log("oldval is:" + oldval)
}
},
computed: {
msg1: function() {
return 'computed:' + this.msg + ',' + this.another + ',' +
arr
}
查看全部 -
template script style
{{msg}}
{{js表达式}}
<div v-html="template"> //实现语句
<a v-bind:href="url"> //v-bind绑定属性data，简写直接写：(:href="url")
<button v=on:click="submit()"> //v-on绑定事件methods，简写@（@click)
new Vue({
this.count++; //this=Vue
})
查看全部 -
git简介 创建项目 git clone，git init 创建分支，推送分支，合并分支 删除分支，回退版本 git clone git@github.com:xxxxxx.git （克隆） git status (查看状态) ls (查看列表) git branch 分支名 （创建分支） touch 文件（创建文件） git add . (把工作时的所有变化提交到暂存区) git commit -m "文字说明" (提交缓冲区的所有修改到仓库) git push (将文件推送到远程仓库) git checkout -b 分支名 (创建一个分支并切换到创建的分支上) git checkout 分支名 (切换到某一个分支上) git merge 分支名 (合并某一分支上的内容到当前分支上) git branch -D 分支名 (删除本地某一个分支) git push origin :分支名 (删除远程仓库的某一个分支) git reset --hare head^ (退回到上一个最近的版本) git reset --hare 版本号或者HEAD@{数字} (退回到指定的版本) git log (按提交时间列出所有的更新) git reflog (查看所有分支的所有操作记录)查看全部
-
调试： Chrome的Vue插件 输出：console.log 阻塞：alert() 断点：debugger。配合：methods中定义output方法使用（output方法中进行console.log等操作皆可），在程序暂停后在terminal中执行this.output()即可。 mounted：它是Vue的生命周期，当组件挂在完成后会执行，可绑定window.vue，绑定后将代表这个组件。查看全部
举报