一: vue的下载

vue.js是目前前端web开发最流行的工具库之一，由尤雨溪在2014年2月发布的。另外几个常见的工具库：react.js /angular.js官方网站：​    中文：https://cn.vuejs.org/​    英文：https://vuejs.org/        官方文档：https://cn.vuejs.org/v2/guide/       在github下载：https://github.com/vuejs/vue/releases        在官网下载地址： 
      
               vue的引入类似于jQuery，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。
      

二:vue的基本使用

    
                  
      
    
           
           
       
{
    { message }}
      

打印结果

三: vue.js 的M-V-V-M 思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。View 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。ViewModel 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。

    
                  
      
        
                
       
{
    {title}}
        
               
           
      
    

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据

console.log(vm.$el) # #box vm对象可以控制的范围

console.log(vm.$data); # vm对象要显示到页面中的数据

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:"小明",          }      表单元素：                       使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。

三:显示数据

1. 在双标签中显示数据要通过{

   {
   }}来完成数据显示

2. 在表单输入框中显示数据要使用v-model来完成数据显示

    
                  
      
        
       
{
    {title}}
        
       
{
    {url1}}
        {
     {img}}
       
        
       
       
        
               {
     {message.toUpperCase()}}        {
     {num + 10}}        {
     {num < num2 ? "num小于num2":"num大于num2"}}    
      
    

1. 可以在普通标签中使用{

{ }} 或者 v-html 来输出data里面的数据

<h1>{

{message}}</h1>

2. 可以在表单标签中使用v-model属性来输出data里面的数据，同时还可以修改data里面的数据

<input type="text" v-model="username">

3.在输出内容到普通标签的使用{

{

}}还支持js代码

{
    {str1.split("").reverse().join("")}}
    
          
{
    {num1+3}}
    
          
num1和num2之间进行比较,最大值:{
    { num2>num1?num2:num1 }}

四:常用指令

1

指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。因为vue的历史版本因，所以有一部分指令都有两种写法：vue1.x写法             vue2.x的写法v-html         ---->   {
     {  }}v-bind:属性名   ---->   :属性v-on:事件名     ---->   @事件名

格式:
      <标签名 :标签属性="data属性">
{
    { str1 }}
 
      淘宝百度  
      

有两种写法，@事件名 和 v-on:事件名    按钮   
          按钮21. 使用@事件名来进行事件的绑定   语法：      
{
    {num}}
2. 绑定的事件的事件名，全部都是js的事件名：   @submit   --->  onsubmit   @focus    --->  onfocus   ....

    
                  
      
        
       
{
    {p1}}
        
       
        
               
               
       点击弹出一个窗口        
       {
    {num}}    
      
    

    
                  
      
        
       增加        
               
       减少        
       {
    {num}}        
       
        
       +        
               
           
      
    

五: 操作样式

格式::<h1 :class="值">元素</h1>  值可以是对象、对象名、数组

1

    
                      
      
         
               
       
一个段落
        
       
一个段落
    
      
    
              
      
        
       改变背景        
       改变字体颜色        
       
第二个段落
    
      
    
              
      
        
       
第三个段落
    
      
    

操作结果

2

格式1：值是json对象，对象写在元素的:style属性中     标签元素：             
      
     data数据如下：         data: {             activeColor: 'red',             fontSize: 30         }格式2：值是对象变量名，对象在data中进行声明   标签元素：               
      
   data数据如下：         data: {                styleObject: {                     color: 'red',                     fontSize: '13px'                          }                 }格式3：值是数组  标签元素：                
      
    data数据如下：                data: {                     style1:{                       color:"red"                     },                     style2:{                       background:"yellow",                       fontSize: "21px"                     }                }

    
                      
      
        
       
            
                    
                    
                
       
        
       
            
        
         按钮一对应的内容
        
            
        
         按钮二对应的内容
        
            
        
         按钮三对应的内容
        
        
       
    
      
    

    
                      
      
        
       
            
        国内新闻            
        国际新闻            
        银河新闻            
                
       
        
       
            
        
         国内新闻列表
        
            
        
         国际新闻列表
        
            
        
         银河新闻列表
        
        
       
    
      
    

显示结果

六:条件渲染指令

1vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。

标签元素：      
                  
Yes
  data数据：          data:{              ok:false    // true则是显示，false是隐藏      }

v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。 标签元素：            
Yes
            
No
  data数据：          data:{              ok:false    // true则是显示，false是隐藏      }

标签元素：            
num的值为1
            
num的值为2
          
num的值是{
    {num}}
  data数据：          data:{              num:2      }

用法和v-if大致一样，区别在于2点：1. v-show后面不能v-else2. v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]  标签元素：            
Hello!
  data数据：          data:{              ok:false    // true则是显示，false是隐藏      }

在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。数据是数组：                
      
            
                   
       
{
    {i}}
        
      
        
      
            
                   
       
{
    { j+1}}、{
    {i}}
        
      
数据是对象：        
      
            
                   
       
{
    {i}}
        
      
        
      
            
                   
       
{
    {j}}:{
    {i}}
        
      

    
                  
      
        
       
xxx，欢迎您再次登陆我们网站！
        
               
       
注册 登陆
        
       
        
               
       
这个数字可以被3整除
        
       
这个数字可以被5整除
        
       
这个数字可以被7整除
        
       
这个数字比较特别: {
    {num}}
        
               
       
num大于10
        
       
num小于等于10
    
      
    

    
                  
      
        
       
            
                    
        
{
    {item}}
        
       
        
       
            
                    
        
编号:{
    {key+1}},姓名:{
    {item}}
        
       
        
       
            
                    
        
书名:{
    {item.name}}，价格：{
    {item.price}}
        
       
    
      
    

vue基础综合

goods:[

{"name":"python入门","price":150},

{"name":"python进阶","price":100},

{"name":"python高级","price":75},

{"name":"python研究","price":60},

{"name":"python放弃","price":110},

]

# 把上面的数据采用table表格输出到页面，价格大于60的那一条数据需要添加背景色

    
                      
      
        
       添加商品        
       
       
        
       
                    
         
                          
商品ID
                          
商品标题
                          
商品数量
                          
商品价格
                          
操作
                     
                     
                          
{
    {goods.id}}
                          
{
    {goods.name}}
                          
{
    {goods.number}}
                          
{
    {goods.price}}
                          
                    编辑                    删除{ {key}}                
                     
                
       
        
       
                    商品标题: 
        
        
        
            商品数量: 
        
        
        
            商品价格: 
        
        
        
            
        保存            
        取消