Vue 入门
程序员文章站
2022-03-26 13:25:23
vue是国人开发的一个js框架，国人用得比较多。 Vue等框架与jQuery的区别 jQuery基于dom操作 Vue框架以数据驱动、组件化开发为核心 下载vue.js 如果安装了node，执行命令 npm install vue 下载vue.js，可在vue后面加上 @版本号 指定要下载的vue. ......
vue是国人开发的一个js框架，国人用得比较多。
vue等框架与jquery的区别
-
jquery基于dom操作
-
vue框架以数据驱动、组件化开发为核心
下载vue.js
如果安装了node，执行命令 npm install vue 下载vue.js，可在vue后面加上 @版本号 指定要下载的vue.js版本，未指定时默认下载最新稳定版。
在代码中引入下载的vue.js：
<script type="text/javascript" src="vue.js"></script>
上线时要换为生产版 vue.min.js
demo vue.js的简单使用
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入vue.js -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--留坑，后续填数据 -->
<div id="app"></div>
<div class="red"></div>
<div></div>
<script>
new vue({
el:'#app', //通过id来指定
template:'<p>hello vue1</p>' //要填充的内容。可以去嵌套元素，比如'<div><p></p></div>'；但只能有一个根元素，'<div></div><div></div>'这样就不行
});
new vue({
el:'.red', //通过class来指定
template:'<p>hello vue2</p>'
});
new vue({
el:'div', //通过元素名来指定。不常用，因为控制不精细
template:'<p>hello vue3</p>'
});
</script>
</body>
</html>
new vue()只会产生一个vue对象，只能填一个坑。
比如有2个<div class="red">，一个new vue()只能填一个。
demo 动态数据
<div id="app"></div>
<script>
new vue({
el:'#app',
template:'<p>姓名：{{name}}，年龄：{{age}}</p>', //可以用{{ }}占位
data:function(){
return{
name:'chy', //数据
age:20,
}
}
});
</script>
下一篇： [前端第四课]HTML样式的使用