"en">"UTF-8">
    
"app">
    
    
    
{{ message }}

1. vue的使用要从创建Vue对象开始
   var vm = new Vue();
   
2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
   var vm = new Vue({
         el:"#app",
          data: {
             数据变量:"变量值",
             数据变量:"变量值",
             数据变量:"变量值",
          },
   });
   
   el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
   data: 保存vue.js中要显示到html页面的数据。
   
3. vue.js要控制器的内容范围，必须先通过id来设置。
  
"app">
      
{{message}}
      
{{message}}
  

"en">
"UTF-8">
    
"app">
        
        
{{name}}
        
{{age}}
        
        "text" v-model="name">
    

console.log(vm.$el)     # #box  vm对象可以控制的范围
console.log(vm.$data);  # vm对象要显示到页面中的数据
console.log(vm.$data.message);  # 访问data里面的数据
console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.

1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{  }}
   用法：
      vue对象的data属性：
          data:{
            name:"小明",
          }
      标签元素：
              
{{ name }}
2. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model
   用法：
      vue对象的data属性：
          data:{
            name:"小明",
          }
      表单元素：
              "name">
      
   使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。

"en">
"UTF-8">
    
{{ str1 }}
    
{{ str1.split("").reverse().join("") }}
    
num和num2中比较大的数是：{{ num>num2? num:num2 }}
    "text" v-model="name">
    
{{(price+0.8).toFixed(2)}}

"en">
"UTF-8">
    
class="app">
        
{{title}}
        
{{url1}}

        {{img}}
"img">
    
    

1. 可以在普通标签中使用{{  }} 或者 v-html 来输出data里面的数据
   
{{message}}
   
2. 可以在表单标签中使用v-model属性来输出data里面的数据，同时还可以修改data里面的数据
   "text" v-model="username">

 
{{str1.split("").reverse().join("")}}
    
    
{{num1+3}}

    
    
num1和num2之间进行比较,最大值:{{ num2>num1?num2:num1 }}

vue1.x写法             vue2.x的写法
v-html         ---->   v-html
{{ 普通文本 }}          {{普通文本}}
v-bind:属性名   ---->   :属性
v-on:事件名     ---->   @事件名

"data属性">标签名>

"str1">{{ str1 }}
 
"url2">淘宝
"url1">百度  

"num++">按钮   
"num+=5">按钮2

1. 使用@事件名来进行事件的绑定
   语法：
      
"num++">{{num}}

2. 绑定的事件的事件名，全部都是js的事件名：
   @submit   --->  onsubmit
   @focus    --->  onfocus
   @blur     --->  onblur
   @click    --->  onclick
   ....

格式：
   
class="值">元素
  值可以是字符串、对象、对象名、数组

1. 给元素绑定class类名，最常用的就是第二种。
    vue对象的data数据：
        data:{
          myObj:{
            complete:true,
            uncomplete:false,
          }
        }

        html元素：    
            
class="box" :class="myObj">2222

    最终浏览器效果：
            
class="box complete">2222

    标签元素：
      
            
if="ok">Yes

  data数据：
          data:{
              ok:false    // true则是显示，false是隐藏
      }

标签元素：
            
if="ok">Yes
            
else>No

  data数据：
          data:{
              ok:false    // true则是显示，false是隐藏
      }

  标签元素：
            
if="num==1">num的值为1
            
else-if="num==2">num的值为2
          
else>num的值是{{num}}

  data数据：
          data:{
              num:2
      }

标签元素：
            
"ok">Hello!

  data数据：
          data:{
              ok:false    // true则是显示，false是隐藏
      }