学习vue

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

脑瓜不疼

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

阅读量290

点赞数 2

分类专栏：大前端文章标签： vue

本文链接：https://blog.csdn.net/super__code/article/details/76836459

版权

大前端专栏收录该内容

88 篇文章 0 订阅

订阅专栏

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>

脑瓜不疼

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习vue

vue的使用1、vue下载及引入2、创建vue实例一、模板 {{message}}// 实例一个vue var app1 = new Vue({ el: '#codeVue', //选择器用来获取元素 id class 标签都可用 data: { //data 必须所有的数据
复制链接

扫一扫

专栏目录