vue.js入门（一）

最新推荐文章于 2024-07-21 12:09:34 发布

可爱的小雨

最新推荐文章于 2024-07-21 12:09:34 发布

阅读量221

点赞数

分类专栏： vue.js入门文章标签： vue.js 入门

本文链接：https://blog.csdn.net/qq_36685875/article/details/78505195

版权

vue.js入门专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>

<head>

</head>

<body>

{{title}}

</div>

var vm=new Vue({ //创建一个vue对象

el:"#app", //选择id为app的节点

data:{

title:"小雨大雨" //给title赋值为小雨大雨，即为单向数据绑定

}

});

</script>

</body>

</html>

--------------------------------------------------------------v-bind数据绑定,v-model模型,-------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js(一)</title>
</head>
<body>
<div id="myapp">
{{title}}
<input type="text" v-model="title">
<a v-bind:href="url">百度</a> 
<a v-bind:href="url2">w3c</a>
</div>

<script>
//数据观察，及时更新，设计模式：观察者模式

//对象实例化
var vm=new Vue({
el:"myapp", //元素，即作用的范围
data:{ //数据
title:"小雨和呆瓜",
url:"http:www.baidu.com",
url2:"http:w3cSchool.com"
}
});

// vm.$el====document.getElementById("myapp");//二者等价，el前加$是规定

vm.$el.style.color="red";//可以直接操纵样式

</script>
</body>
</html>

--------------------------------------------------------------对象继承-------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js(一)</title>
</head>
<body>
<div id="myapp">
{{title}}
</div>

<script>
//对象继承
var subClass=Vue.extend({

data(){ //等于function data(){}
return {
title:"我的中国梦"
}
}
});

var vm=new subClass({ //相当于new Vue()
el:"myapp" //只能在实例里挂载，不能在上面的继承里挂载，这是规定
});
</script>
</body>
</html>

----------------------------------------------------------------------------------v-for循环数组--------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入门（一）</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="myapp">
<ul>
<li v-for="item in items">
{{items.title}}
</li>

</ul>

</div>
<script>
var vm=new Vue({
el:"myapp", //元素
data:{ //数据对象
items:[{title:"张三"},{title,"李四"},{title:"王五"}] //json字符串数据格式
}
});

//json字符串一般用ajax读取放在后台的json
//网站环境，php，nodeJS
//JSON模拟一个
//推荐：axios,原生ajax,jquery可用，但不推荐
</script>
</body>
</html>