vue简单应用

1Vue介绍

# vue是js框架   （jq）
# 渐进式框架:前端项目可以只有一部分使用vue，完全使用vue，作为一个vue项目
# 版本：
	2.x 咱们学习，企业里常用
    3.x 最新的
    
    
# M-V-VM思想
	-Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式
    -双向数据绑定
# 架构：MVC   MTV   MVP


# 组件化开发、单页面开发
	-单页面开发：vue工程，整个项目，其实就只有一个index.html页面
    -组件化开发：  xx.vue 
    
# 开发前端使用的ide
	-vscode：go，python...  免费，微软出的
    -jetbrains系列：收费，Pycharm，goland，phpstorm，idea，webstorm
    	-androidstadio：谷歌买了jetbrains版权，自己定制的ide
    -其他
    	-sublinetext
        -hbuilder
        -eclipse
        -myeclipse
        -vim  yyds  插件 美化
        
        
   -开发前端使用pycharm，装vue插件

        
    
    

2 Vue快速使用

    
    
    







    我的名字是：{{name}}，我的年龄是：{{age}}

3 模板语法

    
    
    



插值语法


    
我的名字是:{{name}}
    
我的年龄是：{{age}}
    
我的爱好是：{{hobby}}
    
显示对象：{{obj}}

    
{{url}}
 默认情况，原封不动显示，如果能直接渲染成标签，说明存在漏洞 xss攻击

4 文本指令

v-html:把标签字符串显示成标签
v-text：等同于插值
v-show：显示不显示，不是真正删除
v-if：显示不显示，是真正的删除

    
    
    



文本指令



    
就想显示成标签
    
{{url}} 
    指令写在标签内，指令对应的变量，直接写就可以了，不需要再用 {{}} 包裹了

    

    v-html：把字符串，渲染成标签
    

    

    v-text：把变量内容，渲染到标签中
    
{{hello}}
    

    

    v-show:一个标签是否显示,用变量可以，用true或false也可以， 其实是display: none;并不是真正的把dom删除了
    

        我是一个div
        
我的div
        
我的div
        
我的div
    
    

    v-if:真正的删除，效率低
     

        我是第二个个div
        
我是第二个个div
        
我是第二个个div
        
我是第二个个div
    

5 事件指令

v-on:clicl=''#老的
@click=''#新的

    
    
    



事件指令


    v-on表示事件指令，click表示单击,老语法，不用了
    
按钮
    

    新语法，以后都用这种： @click='函数名'
    
按钮二