学习如何使用Vue

来源：互联网发布：channel.js 下载编辑：程序博客网时间：2024/04/29 06:39

vue的使用

1、vue下载及引入

2、创建vue实例

[html] view plain copy
 
<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
    <script type="text/javascript" src='../assets/jquery.js'></script>  
    <script type="text/javascript" src='../assets/vue.js'></script>   //引入vue   
</head>  
<body>  
<!-- 声明式渲染   文本插值 -->  
    <div id="codeVue">{{message}}</div>  
</body>  
<script type="text/javascript">  
// 实例一个vue      
    var app1 = new Vue({  
        el: '#codeVue',   //选择器  用来获取元素  id class  标签都可用  
        data: {  //data 必须  所有的数据  
            message: 'Hello Vue!'  //用于显示的内容  
      }  
    })  
</script>  
</html>  

3、v-bind
[html] view plain copy
<span style="font-weight: normal;">次处是：“将div的 title 属性和 Vue 实例中的 message 属性一致</span>

[html] view plain copy
<body>  
<!-- v-bind 指令   作用是：“将div的 title 属性和 Vue 实例中的 message 属性一致”。 -->  
   <div id="codeVue">  
        <span v-bind:title="message">悬停在上面会显示内容</span>  
    </div>  
</body>  
<script type="text/javascript">  
    var app = new Vue({  
        el: '#codeVue',     
        data: {    
            message: 'Hello Vue!'  
      }  
    })  
</script>  

4 v-if v-for

if 切换是否显示

for 循环添加绑定

[html] view plain copy
<body>  
<!-- 条件  v-if -->  
   <div id="codeVue">  
       <p v-if="seen">you see me now </p>  
    </div>  
<!-- 循环 v-for -->  
    <div id='forVue'>  
        <ol>  
            <li v-for="arrContent in arrs">  
                {{arrContent.key}}  
            </li>  
        </ol>  
    </div>  
</body>  
<script type="text/javascript">  
    var app1 = new Vue({  
        el: '#codeVue',     
        data: {    
            seen: true  
      }  
    })  
  
    var arrContent =[{key:'learn javascript'},{key:'learn vue '},{key:'learn html'}]  
    var app2=new Vue({  
        el:'#forVue',  
        data:{  
            arrs:arrContent  
        }  
    })  
</script>  
---想了解更多的知识，请加入627336556  技术开发交流群，会有意想不到的收获~~~！！！各种技术等你撩。。。。

阅读全文

0 0

学习如何使用Vue

vue的使用

1、vue下载及引入

2、创建vue实例

3、v-bind [html] view plain copy<span style="font-weight: normal;">次处是：“将div的 title 属性和 Vue 实例中的 message 属性一致</span>

4 v-if v-for

3、v-bind
[html] view plain copy
<span style="font-weight: normal;">次处是：“将div的 title 属性和 Vue 实例中的 message 属性一致</span>