Vue ( 读音 / vjuː/ ，类似于 view) 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
可以一点一点地使用它，只用一部分，也可以整个工程都使用它
版本：vue2 vue3官网：https: // cn. vuejs. org/
文档3 ：https: // cn. vuejs. org/
文档2 ：https: // v2. cn. vuejs. org/ 易用通过 HTML、CSS、JavaScript构建应用灵活不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。高效20kB min + gzip 运行大小超快虚拟 DOM最省心的优化
M：model 数据层V：view 用户视图层VM：viewmodel 连接数据和视图的中间层
可以把公用的 样式html，写成组件后期可以共用- vue项目- - - 》整个vue项目只有一个 页面 index. htmlwebstorm ：跟pycharm是一家 jetbrains公司的vscode： 免费，微软sublimetext：收费pycharm ：跟webstorm是一个东西可以直接在pycharm上装个插件，可以开发vue- 装完后要重启
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " ./js/vue.js" > </ script> </ head> < body> < divid = " app" > </ div> </ body> < script> var vm= new Vue ( { el : '#app' , data : { name : '彭于晏' } } )
</ script> </ html> { { } } - - - { { 变量、js语法、三目表达式，函数加括号 } }
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " ./js/vue.js" > </ script> </ head> < body> < divid = " app" > < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> < p> </ p> </ div> </ body> < script> var vm = new Vue ( { el : '#app' , data : { name : 'lqz' , age : 18 , list1 : [ 1 , 2 , 3 , 4 ] , obj1 : { name : '彭于晏' , age : 19 } , link1 : '<a href="https://www.baidu.com">百度一下 你就知道</a>' , score : 99 } } )
</ script> </ html> - 1 写在标签上- 2 以 v- 开头 都称之为vue的指令，有特殊含义v- text: 把文字渲染到标签内v- html: 把文字渲染到标签内，如果是标签会渲染标签v- show：控制标签显示与否，隐藏v- if ：控制标签显示与否，真的删除<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " ./js/vue.js" > </ script> </ head> < body> < divid = " app" > < h3> </ h3> < pv-text = " name" > </ p> < divv-text = " name" > </ div> < h3> </ h3> < divv-html = " s" > </ div> < h3> </ h3> < imgsrc = " ./img/1.jpg" v-show = " show" height = " 300px" width = " 200px" > < h3> </ h3> < imgsrc = " ./img/2.png" v-if = " if_show" height = " 300px" width = " 200px" > </ div> </ body> < script> var vm = new Vue ( { el : '#app' , data : { name : '彭于晏' , s : '<a href="http://www.baidu.com">点我看美女</a>' , show : true , if_show : true } } )
</ script> </ html> v- on: 事件名= 'handleChange' v- on: click = 'handleChange' 简写成（用的多）@click = 'handleChange' 方法必须放在methods中methods: { handleChange: function ( ) { this. show = !this. show // ! 取反} } <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " ./js/vue.js" > </ script> </ head> < body> < divid = " app" > < button@click = " handleChange" > </ button> < hr> < imgsrc = " ./img/1.jpg" alt = " " v-show = " show" width = " 200px" height = " 300px" > < hr> < h2> </ h2> < p@click = " handleP(name)" > </ p> < hr> < p@click = " handleP" > </ p> < hr> < p@click = " handleP('lqz',19)" > </ p> < hr> < p@click = " handleP('lqz')" > </ p> < hr> < p@click = " handleP('lqz',19,'asdfa','asdfa')" > </ p> </ div> </ body> < script> var vm = new Vue ( { el : '#app' , data : { show : true , name : 'lqz' } , methods : { handleChange : function ( ) { this . show = ! this . show } , handleP : function ( name, age ) { console. log ( name) alert ( '你的名字是：' + name + "你的年龄是:" + age) } } } )
</ script> </ html>
v- bind: 属性名= '值'
: 属性= '值'
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " ./js/vue.js" > </ script> </ head> < body> < divid = " app" > < img:src = " img" alt = " " height = " 300px" width = " 200px" > < p:id = " p_id" > </ p> < hr> < h1> </ h1> < button@click = " handleChange" > </ button> < br> < img:src = " img_change" alt = " " height = " 300px" width = " 200px" > </ div> </ body> < script> var vm = new Vue ( { el : '#app' , data : { img : './img/1.jpg' , p_id : 'xx' , img_change : './img/1.png' , } , methods : { handleChange : function ( ) { var c = Math. ceil ( Math. random ( ) * 6 ) this . img_change = ` ./img/ ${ c} .png ` } } } )
</ script> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " ./js/vue.js" > </ script> < style> .red { background-color : red; } .green { background-color : green; } </ style> </ head> < body> < divid = " app" > < button@click = " handleChangeBack" > </ button> < div:class = " back" > </ div> </ div> </ body> < script> var vm = new Vue ( { el : '#app' , data : { back : 'green' , } , methods : { handleChangeBack : function ( ) { this . back = this . back == 'red' ? 'green' : 'red' } } } )
</ script> </ html> <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " ./js/vue.js" > </ script> < style> .background { background-color : pink; } .fontsize { font-size : 60px; } .back { color : green; } </ style> </ head> < body> < divid = " app" > < h1> </ h1> < button@click = " hancleCilck1" > </ button> < div:class = " str_class" > </ div> < hr> < button@click = " hancleCilck2" > </ button> < div:class = " list_class" > </ div> < button@click = " hancleCilck3" > </ button> < div:class = " obj_class" > </ div> < hr> < h1> </ h1> < button@click = " hancleCilck4" > </ button> < div:style = " str_style" > </ div> < button@click = " hancleCilck5" > </ button> < div:style = " list_style" > </ div> < button@click = " hancleCilck6" > </ button> < div:style = " obj_style" > </ div> </ div> </ body> < script> var vm = new Vue ( { el : '#app' , data : { str_class : 'background' , list_class : [ 'background' ] , obj_class : { 'background' : true , 'fontsize' : false } , str_style : 'background-color: yellow' , list_style : [ { 'background-color' : 'yellow' } ] , obj_style : { backgroundColor : 'pink' , color : 'red' } } , methods : { hancleCilck1 : function ( ) { this . str_class = this . str_class + ' fontsize' } , hancleCilck2 : function ( ) { this . list_class. push ( 'fontsize' ) } , hancleCilck3 : function ( ) { this . obj_class. fontsize = true } , hancleCilck4 : function ( ) { this . str_style = this . str_style + ';font-size: 60px' } , hancleCilck5 : function ( ) { this . list_style. push ( { 'font-size' : '40px' } ) } , hancleCilck6 : function ( ) { this . obj_style[ 'color' ] = 'green' } } } )
</ script> </ html> 就是判断，符合哪个条件，就显示哪个标签
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " ./js/vue.js" > </ script> </ head> < body> < divid = " app" > < pv-if = " score>=90&&score<=100" > </ p> < pv-else-if = " score>=70&&score<90" > </ p> < pv-else-if = " score>=60&&score<70" > </ p> < pv-else > </ p> </ div> </ body> < script> var vm = new Vue ( { el : '#app' , data : { score : 91 } , } )
</ script> </ html>
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " ./js/vue.js" > </ script> </ head> < body> < divid = " app" > < h1> </ h1> < p> </ p> < p> </ p> < p> < spanv-if = " userinfo.userType==1" > </ span> < spanv-else-if = " userinfo.userType==2" > </ span> < spanv-else > </ span> </ p> </ div> </ body> < script> var vm = new Vue ( { el : '#app' , data : { userinfo : { username : 'lqz' , age : 19 , userType : 1 } } , } )
</ script> </ html> 
