Vue顶尖高手-前端组件化开发

1.使用vue-cli,内置了webpack,可以直接cnpm run build,会把.vue后缀直接打包:
a)安装,现在改名为@vue/cli:cnpm -g install @vue/cli
b)查看版本:vue -V
c)创建vue脚手架:vue create app1,可以进入选择安装
d)默认目录及文件:
2.路由,创建时选择安装路由,按F5刷新时,会404,主要是vue是前端直接改变了浏览器中的url链接,这时并没有真实的请求了后台。

课程八-Vue.js框架-2

1.数据丢失:修改模型数据,但视图中却没有改变
a)数组中的值类型被修改,数据会丢失(但引用类型会被修改):msg[1]=”修改数组成员”
b)数组中的新成员,数据会丢失:msg[4]=”新的数组成员”
c)对象中的新成员,数据会丢失:title.size=100
d)未初始化/没有的属性,数据会丢失:value=50
2.插值语法和html属性插值,都提供js环境,支持所有的js表达式
a)插值语法:{{msg}}
b)html属性插值:v-bind(语法糖”:”),v-bind:title=”title+’world'”
3.过滤器:因为插值中提供js环境,会照成页面臃肿,所以提供自定的过滤器方法,让大部分操作在js中完成。
a)局部过滤器:在vue实例中.
filters:{method:function(value1,value2)}//写法
msg|method(value2)//用法,默认|前的值为filter的第一个参数

b)全部过滤器:在实例化vue之前定义。
Vue.filter('capitalize', function (value) {});
new Vue(...)

4.监听数据变化:

watch:{param:function(){}}//写法

5.计算属性数据:理解为动态属性数据,与静态属性(data)相对,在模板获取数据之前

computed:{param:function(){return value;}}//定义

6.属性双向绑定:v-model绑定表单元素,实现数据双向绑定,(v-bind也能,但是单向绑定)

<input type="text" name="" id="" v-model="user.name">
                {{user.name}}

7.消除闪烁:
a)在css中添加属性选择器v-cloak,一般在head里是内部样式:[v-cloak]{display:none;}
b)为vue容器元素添加v-cloak:·“`

<

div id=”app” v-cloak>8.事件绑定:vue中的绑定事件是原生事件,直接绑定到元素中,没有jquery那样的事件委托,所以新增元素并不会绑定事件。(事件委托的好处:减少事件绑定,防止内存泄漏,预言未来元素)
有一个问题存在,怎么解决新增元素的事件:1.尽量减少新增元素,2.思考"数据驱动视图",3.组件方式?
a)在元素上使用”v-on:事件名“来绑定事件,语法糖:@事件名,$event把事件本身当成参数传递过去


b)在Vue实例中定义methods,其中event表示是原生 DOM 事件,target表示事件原无素
methods:{
smt:function(event){
alert(event.target.tagName)
}
}
c)使用数据驱动视图的方式增加新元素并绑定有事件:
c1)定性静态属性数据:
buttonCount:1c2)在需要新增列表的元素上:c3)触发的事件需要把:buttonCount++9.组件:
10.绑定类和样式
a)类:

v-bind:class=””//加”表示纯字符串
b)样式:
v-bind:style=””//css样式名称是w3c预定好的
“`

课程八-Vue.js框架-环境搭建

1.npm常用于后端包管理工具
bower通过npm安装,用于前端包管理工具。//此教程中全部使用npm,不使用bower
2.es5和es6
3.mvvm框架
4.vue中的mvvm框架:
M:模型,js中的数据对象
V:视图,视图模板
VM:视图模型,就是Vue的实例化对象,通过data绑定模型数据,通过el绑定视图模板
01 体验vue[00_02_00][20200206-224012]
5.export和import模块化,在浏览器中,可以使用script type=”module”来调用(测试可以,目前不建议使用)
6.babel
7.webpack:打包工具
8.webpack4打包引用vue2x:
a)runtime方式:在自己的js(如index.js)中导入:import Vue from ‘dist/vue.js’;from后面是vue.js真实路径
b)complier方式:在自己的.vue中导入:import Vue from vue;(此时vue需要通过npm安装,cnpm install vue)
9.完整webpack4使用vue2x的runtime方式:
a)首先创建webpack项目环境,创建目录并进入:mkdir app&& cd app
b)初始化独立项目的开发环境:npm init -y(默认会生成package.json文件)
c)安装webpack:cnpm install webpack webpack-cli
d)增加目录及文件:./index.html,./src,./src/index.js,./webpack.config.js
e)修改打包配置:./webpack.config.js
module.exports={
entry:{
main:"./src/index.js"
//多个kv对应文件
},
output:{
filename:'[name].js'//写一个通用的就行
}
}

f)开始使用Vue:通过自行导入vue.js或者安装cnpm install vue方式,得到vue.js的物理地址
g)在index.js中使用vue

import Vue from './dist/vue.js'
//import Vue from 'vue'
//第二种需要在webpack.config.js中添加节点,会在node模块中找:resolve:{
//      alias:{
//          'vue$':'vue/dist/vue.js'
//      }
//  },

var app=new Vue({
    el:'#app',
    data:{
        msg:'hello'
    }
})

h)在html文件中使用:

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

    <script src="./dist/app.bundle.js"></script>

js

prototype属性
闭包:方便外部访问函数内的属性
function fn(){
    var max=10;
    return function (x){
       console.log(x+max)
    }
}
var f1=fn();
f1(5)
小驼峰法
大驼峰法
BOM 浏览器对象模型 (BOM),alert,confirm,setInterval都是BOM事件
DOM (文档对象模型),onclick,onsubmit都是DOM事件
try{} catche(err){}
创建对象的方法:***在JS里,一切都是对象*****
变量名提升:关键字 var 和 function 开头的语句块提前进行处理,var提前声明为undefied.关键字let 不提升,会报错