一、vue的功能及作用

• 工作方式如下

1.不用操作DOM

2.单页面应用web项目 简称：SPA

3.当下各种新框架都采用的类似Vue或者类似React的语法去作为主语法，微信小程序/MpVue......

4.掌握Vue的开发语法，相当于掌握了新的开发模式，可以适应目前绝大多数的技术环境

• Vue特点

1.数据驱动视图，可以让我们只关注数据

2.MVVM双向绑定

3.通过指令增强了html功能

4.组件化，复用代码

5.开发者一般只关注数据

• Vue的安装及使用

1.直接通过路径引入，地址：https://vuejs.org/js/vue.min.js

2.直接下载在本地引入

3.采用npm安装的方式，命令：npm install vue

提示：注意Vue.js不支持IE8及其以下版本

示例demo：

"app">
        {{msg}}
    
    
    

　　　　在插值表达式中使用js表达式、三元运算符、方法调用 -->

        
{{string}}
        
{{count == 100}}
        
{{count < 100}}
        
{{count+10}}
        
{{string.split("|")}}
        
{{count < 100?"小于"：“大于}}

指令--凡是以v-开头的都叫vue指令

• v-text和v-html   与  innerText和innerHTML相比较
• 插值表达式 1.是插入时的数据渲染   2.尚未渲染完成时会出现丑丑的大括号
• v-text、v-html是整体式的数据替换  2.尚未渲染完成时不会出现东西（渲染标签中事先有内容除外）
• 注意，非必要时尽量不要使用或者禁止使用v-html，因为会有xss跨站脚本攻击

"app">
        
"string"> 1236
        
"string">46413
    

• v-if  更大的开销  适用于不平凡切换显示状态，并且初始渲染时不必渲染，多重判断时适合使用
• v-show  开销较小  适用于平凡切换显示状态

     
if ="isShow"> {{string}}
     
"isShow">{{46413}}

• v-on ：click  简写（@click）
• @click.once只触发一次
• click.prevent 阻止默认事件
• click.stop 阻止冒泡事件

"clickMe('Ultraman')">点击我
        
        "clickOnce">只触发一次
        
        "http://www.baidu.com" @click.prevent="stopjump">百度
        
"alert(1)">
            
            

                
"alert(3)">
                    我是div
                
            
        

•  input标签 change  v-bind模拟v-model的底层

　　　　"text" @change="change">
　　　　"text" v-bind:value="string" @input="inputChange($event)">

                change(){
                    alert("数据改变了");
                },
                inputChange(e){
                    console.log("变了");
                    this.string = e.target.value;
                }                

• v-for 迭代；循环

            
            
for="item in array">{{item}}
            
            
for="item in objectArray">{{item.id}}----{{item.name}}
            
            
for="obj in object">{{boj}}
            
for="(v,k,i) in object">{{k}}--{{v}}--{{i}}
            
             
for="num in 10">{{num}}--指定数据
 

• v-bind 其作用是绑定标签上的所有属性
• 当标签上的属性变量或者动态的亦或需要改变的
• 简写“：”

"'ptest'">
        
"idName">
        
class="showStyle?'p-style1':''">pppppp
        
class="'p-style1':showStyle">pppppp
        
class="'[bolder',showStyle?'p-style1':'p-style2']">pppppp
        
class="'[bolder',{'p-style1':'p-style2'}]">pppppp
        
"color:'red'">ppppppp
        "changeColor">变色


CSS

•   v-model、v-cloakd和v-once的作用

　　
"app" v-cloak>
        {{msg}}
        {{range}}
        

        
        
　　　　　 　
        
        "text" v-model="msg">
        "text" v-model="range">
        "range" v-model="range">