在线第一个Vue程序
导入在线Vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
创建Vue实例
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
}
});
</script>
</body>
网页输出hello
vue常见属性
这里介绍下面需要用到的Vue属性：
el属性：用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。相当于一个容器，跟上面的div id = “app”做关联，从此以后上面div id = “app”里面的内容要通过vue来渲染,都要经过vue处理才能看得到上面div里面的内容
data属性：用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。跟微信小程序一样，所有的变量都要写在data里面
methods属性：放置页面中的业务逻辑，js方法一般都放置在methods中，用来写方法，函数的
vue指令 v-bind
它是一个 vue 指令，用于绑定 html 属性，如下：
<div id="app">
<a v-bind:href="msg">
点击
</a>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "https://www.cnblogs.com/klearning/"
}
});
</script>
逻辑判断与循环
逻辑判断
<div id="app">
<h1 v-if="score===100">优秀</h1>
<h1 v-else-if="score===90">良好</h1>
<h1 v-else>及格</h1>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
score: 60
}
});
</script>
for循环
用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<div id="app">
<li v-for="(item, index) in items">
{{item.message}}---{{index}}
</li>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
items: [
{message: 'java'},
{message: 'python'},
{message: 'C'}
]
}
});
</script>
事件绑定（监听事件）
可以用 v-on 指令监听 DOM 事件
<div id="app">
<button v-on:click="sayHai()">click me</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "点我!"
},
methods: {
sayHai: function () {
alert(this.msg)
}
}
});
</script>
浙公网安备 33010602011771号