辛淼 Jin

// Create an object: var person = {   firstName: "John",   lastName : "Doe",   language : "EN" }; // Change a property Object.defineProperty(person, "language", {value:"N1O"})

2.9.3 Vue-cli  create folder structure，debug on local，deploy，hot call，unit test. npm install -g  vue-cli    / sudo npm install -g  vue-cli node -v    //resultr:  v12.9.0 babel-core , ES6 to ES5 > vue list vue init webpack test-project      //vue init template-name project-name cd test-project npm install   // install node_modules folder npm run dev package-lock.json, in  npm 5.0 raise speed includes all dependencies. webpack.config.js h t t p s : / /youtube.com/watch?v=xKRbf89ewaA&list=PL9nxfq1tlKKm7rafYCLfGgymd-LRfzGEM&index=9 vue-resource AJAX .babelrc /babel.config.js   es6 to es2015  //node-modules/babel-runtime .editcorconfig    end_of_line = lf //for Mac .eslintignore    ignore check grammar  to build and config folders  eslint .eslintrc.js   format rules .gitignore index.html //WebStorm format : Command + option + L  ...

element.eleme.io https://element.eleme.cn/#/ <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title > Document </ title > < script src = "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js" > < / script > </ head > < body > < div id = "app" > </ div > < div class = "demo" > I will be replaced </ div > < div class = "demo" > this is second, it be keep </ div > < script > var vm = new Vue ({ el: "#app" , template: "<div>huge</div>" }); var vm1 = new Vue ({ el: ".demo" , template: "<div> demo from template ...

v-bind:class < style > .shape { width : 90px ; height : 50px ; margin : 10px ; float : left ;} .square { background : blue ;} .circle { background : red ; border-radius : 50% ;} < / style > < div id = "app" > < div class = "shape square" ></ div > < div class = "shape circle" ></ div > < div style = " clear: both" ></ div > < div class = "shape" v-for = "shape in shapes" v-bind:class = "{circle:shape.circle,square:!shape.circle}" ></ div > </ div > < script > var vm = new Vue ({ el: "#app" , data: { color: "blue" , style: { backgroundColor: 'red' } , shapes: [{ circle: true },{ circle: false }] } , computed: { } } ); < / script < div class = "shape" v-for = "shape in shapes" v-bind:class = "[shape.shape]" ...

v-bind:style < div id = "app" > < div style = " width:100px;height:50px;" v-bind:style = "{'backgroundColor':'blue'}" ></ div > < div style = " width:100px;height:50px;" v-bind:style = "{backgroundColor:'green'}" ></ div > < div style = " width:100px;height:50px;" v-bind:style = "{backgroundColor:color}" ></ div > color < input type = "text" v-model.lazy:value = "color" > < div v-bind:style = "style" > style </ div > < div v-bind:style = "style1" > style1 in computed </ div > </ div > < script > var vm = new Vue ({ el: "#app" , data: { color: "blue" , style: { backgroundColor: 'red' }} , computed: { style1 : function (){ return { backgroundColor: this . color }}} } ); < / script > ...

1.static tag <link rel="preload" as="..."> Just load some resource, not be run. <link rel-"preload" href="/pre/res/stylepre.css" as="style"> 2. dynamic adding into head by script <script> const prelink = document.createElement('link'); prelink.rel="preload"; prelink.as="style"; prelink.href="/pre/res/stylepre.css"; document.head.appendChild(prelink); </script> 3. check const bPreload = ()=>{ const pre=document.createElement('link'); const plist=pre.relList; if(!plist || !plist.supports){ return false;} return plist.supports('preload'); } 4.onload  4.1 call back function  <link rel-"preload" href="..." as="..." onload="preloadDone()">  4.2 running all right <link rel-"preload" href="/pre/res/stylepre.css" as="style" onload="this.rel=stylesheet"...

{{name | upperCase(true)}} , filters: { upperCase : function ( val , isFirstWord ){ var s = val . toString (); if ( isFirstWord ){ return val . charAt ( 0 ). toUpperCase ()+ val . slice ( 1 ); } else { return val . toUpperCase (); } } } < div v-bind:title = "msg|UpFirstChar" > {{msg}} </ div >< br /> < div v-bind:title = "msg|UpFirstChar|removeSpace" > {{msg}} </ div > filters: { UpFirstChar : function ( v ){ v = v . toString (); var arr = v . split ( " " ); var newarr = arr . map ( function ( item ){ return item . charAt ( 0 ). toUpperCase ()+ item . slice ( 1 ); }); return newarr . join ( " " ); } , removeSpace : function ( val ){ return val . toString (). replace ( / / g , "" ); }}

computed:{ //此属性，是由其他data 同步 计算而来。 //1.参与运算的data发生变化时，computed中的属性要重新计算。 //2.同一环境（运行上下文）时，多次调用同一个computed中的属性， //只计算一次，之后的调研，直接使用第一次计算的结果。 } //3.通过set，get函数，实现值得双向变动显示。 watch: {//Tips基础data变化时，执行相应的函数和异步操作，无返回值。} <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title > Document </ title > < script src = "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js" > < / script > </ head > < body > < div id = "app" > < ol > < ul v-for = "l in ListTips" > {{l}} </ ul > </ ol > name: < input type = "text" v-model:value = "name" > desc: < input type = "text" name = "desc...

Vue https://vuejs.org https://github.com/vuejs https://github.com/vuejs/awesome-vue https://forum.vuejs.org https://element.eleme.io element.eleme.io Element，is on base Vue 2.0 . {{msg}} {{age*2}} {{age>60?"old man":"youth"}} {{FullName.split(" ")[0]}} {{LName+","+FName}} {{getFullName1()}} {{getFullName(LName,FName)}} {{value}} < br /> {{typeof value}} methods: { getFullName1 : function (){ //this. must be here. return this . FName + " " + this . LName ; }, Data of Vuejs 2 DOM by v-bind < a href = "{{url}}" > It does not work </ a > < a v-bind:href = "url" > baidu </ a > < div v-bind:title = "url" > baidu </ div > DOM 2 Data of Vuejs by v-on v-on:click < button v-on:click = "showsome" > showsome </ button > < button v-on:click = "showevent($event)" >...