vue是什么
描述
Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架
作者：尤雨溪/中国无锡
官网
安装
安装(需联网)
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
安装(手动)
下载文件后导入项目js使用
<script src="dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="dist/vue.min.js"></script>
实例
hello vue!
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue入门</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> -->
<script src="js/vue.js"></script>
</head>
<body>
<div style="margin-left: 700px;">
<!-- 边界 -->
<div id="app">
<h1>{{msg}}</h1>
</div>
</div>
</body>
<script type="text/javascript">
/* 作用将vue实例挂载到具体的边界,那么这个边界就会被Vue这个浅进式的框架所管理 */
/* 注意边界不能有兄弟标签，边界一定是跟标签 */
new Vue({
el:'#app',
data:{
msg:'hello Vue',
}
})
</script>
</html>
效果
双向绑定
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue双向绑定</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> -->
<script src="js/vue.js"></script>
</head>
<body>
<div style="margin-left: 550px;">
<!-- 边界 -->
<div id="app">
<h1>{{msg}}</h1>
<input type="text" v-model="msg" /><br />
<h2>{{msg}}</h2>
<h3>{{msg}}</h3>
</div>
</div>
</body>
<script type="text/javascript">
/* 作用将vue实例挂载到具体的边界,那么这个边界就会被Vue这个浅进式的框架所管理 */
/* 注意边界不能有兄弟标签，边界一定是跟标签 */
new Vue({
el:'#app',
data:{
msg:'hello Vue',
}
})
</script>
</html>
效果
只要文本框内容一改，全部一起改，因为是绑定的，反过来改也是，
1494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
