学习vue

最新推荐文章于 2023-06-09 14:30:02 发布

原创最新推荐文章于 2023-06-09 14:30:02 发布 · 369 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

大前端专栏收录该内容

88 篇文章

订阅专栏

本文介绍了Vue.js的基本使用方法，包括如何下载和引入Vue.js、创建Vue实例、使用声明式渲染文本插值、v-bind指令、v-if和v-for指令等核心功能。

vue的使用

1、vue下载及引入

2、创建vue实例

<!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  标签都可用强烈推荐id
        data: {  //data 必须  所有的数据
        	message: 'Hello Vue!'  //用于显示的内容
      }
    })
</script>
</html>

3、v-bind

次处是：“将div的 title 属性和 Vue 实例中的 message 属性一致

<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 循环添加绑定

<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>