Vue.Js 学习笔记

3-04 281 views

课程观看地址:https://www.imooc.com/video/18551

"1.课程环境"

NVM 下载地址:https://github.com/creationix/nvm
安装 NPM , NODEJS ,NVM (nodejs版本管理工具)

切换淘宝NPM镜像 npm install -g cnpm –registry=https://registry.npm.taobao.org

chrome 安装 Vue调试工具 "Vue.js devtools"

Vue工程化工具 : npm i -g vue-cli

QQ截图20190304170727

计算属性:computed ,使用场景 数据联动,可侦听多个变量或数组
侦听器:watch ,使用场景,异步场景,一般侦听一个变量或数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test vue2</title>
    <script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
</head>
<body>

<div id="app">
    {{msg}}
    <p>
        {{msg1}}
    </p>
</div>

</body>
<script>

    var app = new Vue({

      el: "#app",
      data:{
        msg:'hello vue',
        another:'another hello 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
        }
      }

    })
</script>
</html>
  • 条件渲染
    v-if,v-else,v-else-if,v-show

  • 列表渲染

  • class与style绑定


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test vue3</title>
<script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
</head>
<body>
<div id="app1">
<div v-if="count > 0">
    count大于0,count={{count}}
</div>
<div v-else-if="count < 0">
    count小于0,count={{count}}
</div>
<div v-else>
    count={{count}}
</div>
<div v-show="count == -1">show:{{count}}</div>
</div>
<div id="app2">
{{msg}}
<ul>
    <li v-for="item in list">
        <span :style="styleMsg" :class="{'active':true}">
            {{item.name}}
        </span>
        <span :class="['active','add','more',{'another':true},{'other':item.age==24}]">
            {{item.age}}
        </span>
    </li>
</ul>
</div>

* vue-cli - 快速创建工程的两种方法 - 工程化项目的目录 安装vue-cli : npm install -g @vue/cli 创建项目:vue create app_name 启动项目:npm run serve * 图形化创建项目 vue ui components——组件 public——资源目录 views——视图目录 .package.json 包含依赖,serve bulid 等等命令
* 组件化思想 --300行原则,尽量把代码控制在300行以内 --复用原则 --业务复杂性原则 组件化带来的问题 --组件状态管理(vuex) --多组件的混合使用,多页面,复杂业务(vue-router) --组件间的传参、消息、事件管理(props、emit/on,bus) * 高执行效率 * 开发单页面复杂应用 风格之南 * 好习惯 少走坑 * 写出自己看得懂的代码 * 写出别人看得懂的代码 参考:https://cn.vuejs.org/v2/style-guide/
Vue-router 路由
Vuex -> 状态管理模式 Actions -> state -> view 循环 * 多个视图依赖同一状态(菜单导航) * 来自不同视图的行为需要变更同一状态(评论弹幕) * 为vuejs 开发的状态管理模式 * 组件状态集中管理 * 组件状态改变遵循统一的原则
```javascript //@表示src目录 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: {//组件状态管理 }, mutations: {//改变vue状态的方法集 }, actions: { } })
调试方法
1.console.log()
2.console.error()
3.alert()
4.debugger
5.chrome vue调试插件
6.vue 实例,window对象绑定
如何集承vue
-集成场景
–单页面,多页面引用vue 直接cdn引用
–复杂单页面应用 vue cli 工具

开发工作流
-需求调研(确定需求)
-交互设计、逻辑设计、接口设计
-代码实现、测试运行、线上部署

网页禁止F12和查看源代码

一个网页禁止F12和查看源代码的函数 使用方法:在body中使用onLoad事件来调用这个函数 function disableInfo() { document.onkeydown = function() { ...

阅读全文

bootbox 水平垂直居中

bootbox.alert('Danger!!' ).find('.modal-content').css({ 'background-color': '#f99', 'font-weight' : 'bold', 'color': '#F00', 'font-...

阅读全文

jquery plupload 上传文件后清空上传队列

最近使用plupload 来上传图片,设置了一个假如当前图片大于10,就不能上传的条件,但是发现,假如这次传了11张,是不可以上传,但是下次只传一张,把之前的11...

阅读全文

欢迎留言