vue2学习笔记

引入vue2.js

<script src=”https://unpkg.com/vue/dist/vue.js”></script>

html部分

<div id=”app”>

{{ message }}

</div>

<!– v-代表开始使用vue –>

<div id=”app-2″>

<span v-bind:title=”message”>鼠标悬停此处查看绑定的动态信息</span>

</div>

<div id=”app-3″>

<!– 判断seen的值来执行元素中的内容 –>

<span v-if=”seen”>现在你可以看到我了</span>

</div>

<div id=”app-4″>

<ol>

<!– 调用for循环输出 –>

<li v-for=”todo in todos”>

<!– 语法比较像foreach –>

{{ todo.text}}

</li>

</ol>

</div>

<div id=”app-5″>

<p>{{ message }}</p>

<!– 用on绑定一个点击事件 –>

<button v-on:click=”reverseMessage”>逆转消息</button>

</div>

<div id=”app-6″>

<p>{{ message }}</p>

<!– 其中输入的元素直接赋值给message属性 –>

<input v-model=”message” >

</div>

<div id=”app-7″>

<ol>

<!– 遍历app7下的data的lists数组,再将遍历后的结果转入组件的参数最后由组件显示内容 –>

<todo-item v-for=”list in Lists” v-bind:food=”list”>

 

</todo-item>

</ol>

</div>

<div id=”app7_1″>

<ul>

<neirong v-for=”list in content” v-bind:food=”list”></neirong>

</ul>

</div>

script部分

var app = new Vue({

el: ‘#app’,       //绑定的元素

data: {

message: ‘你好,世界’

}

})

var app2 = new Vue({

el:’#app-2′,

data:{message:’页面加在于’+new Date()}

})

var app3 = new Vue({

el:’#app-3′,

data:{seen:true}

})

app3.seen = false;  //可以修改内容

var app4 = new Vue({

el:’#app-4′,

data:{

// 数组形式

todos:[

{ text : ‘学习使我快乐’},

{ text : ‘沉迷学习,无法自拔’},

{ text : ‘沉迷学习,日渐消瘦’}

]

}

})

//向数组内部增加元素

app4.todos.push({text : ‘一天不学习,浑身难受’})

//与用户交互处理用户输入

var app5 = new Vue({

el:’#app-5′,

data:{message:’hello world!’},

//创建一个关联的事件?

methods:{

reverseMessage : function(){

this.message = this.message.split(”).reverse().join(”);

}

}

})

var app6 = new Vue({

el:’#app-6′,

data:{message:’Hello Vue!’}

})

 

//使用component来预定义一个Vue组件名叫todo-item(全局,必须在引用div读取之前定义)

Vue.component(‘todo-item’,{

//定义一个名为todo的形参(用props来定义)

props:[‘food’],

//具体内容

template: ‘<li>{{ food.text }}</li>’

})

 

var app7 = new Vue({

el:’#app-7′,

data:{

Lists:[

{text:’蔬菜’},

{text:’奶酪’},

{text:’罗宋汤’}

]}

})

 

Vue.component(‘neirong’,{

props:[‘food’],

template:'<li>{{ food.text }}</li>’

})

 

var app7_1 = new Vue({

el:’#app7_1′,

data:{

content:[

{text:’内容1′},

{text:’内容2′},

{text:’内容3′}

]}

})

赞 (2)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址