vue基础结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue1">
{{name}}
<span v-html="name"></span>
<p v-if="isShow">我是动态创建和删除</p>
<p v-show="isShow">我是动态显示和隐藏</p>
<div v-bind:class="isShow?'aaa':'bbb'"></div>
<button v-on:click="btn">按钮</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#vue1",
data: {
"name": "<b>shaoyuan</b>",
"isShow":false,
},
methods:{
btn:function(){
this.name="邵园";
this.isShow=true
}
}
})
</script>
</body>
</html>
1.导入vue.js
从本地倒入：
下载地址：https://vuejs.org/js/vue.min.js
从网上导入：
1.Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
2.unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
3.cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
推荐使用第二种。
2.vue的基础模板语法：
插值：
文本：
{{name}}
html：
即使"name": “shaoyuan”,如果直接在上面文本中加入也只是显示一个字符串，一定要用指令v-html
指令：
v-if
如果是True就创建这个标签，否则删除。
v-show
如果True就在浏览器显示这个标签，否则不显示。
v-bind
例：v-bind:class=“isShow?‘aaa’:‘bbb’”；缩写：:class=“isShow?‘aaa’:‘bbb’”
如果isShow为True则class=aaa，否则class=bbb。
v-on
例：v-on:click=“btn”；缩写：@click=“btn”
监听DOM事件。
以上是一些基本的语法、指令。
1982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
