首先看下这个文件长什么样 在编辑器中很容易就发现分成了三个部分 <template> 里面是写html的 <script>里面写vue的逻辑层 <style>里面写vue的样式 scoped表示该文件的css单独打包成一个css 是一个单独作用的css
看下之后全部删除 之后写 注意<template>里面必须要有一个根div包裹住里面的东西
<template> <div>
<h1>hello vue</h1>
</div> </template> <script> export default { } </script> <style> </style>
在看网页有一张图片和一句hello vue 打开App.vue 把里面的图片标签删除。
现在想这样一个问题，能不能用数据在网页上显示 如果按照js的思路来 那么会使用.innerhtml方法在网页上进行输出，而在vue里面则是这样输出的
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
msg:'hello vue'
}
}
}
</script>
<style>
</style>
在vue里面数据存放于data中，data可以简单粗暴的理解为是一个函数 里面有个名为val的参数 使用两个花括号的扩起来的这个值就是从data函数里面拿的值，但是注意 data函数里面必须有return且里面的值必须以键值对的形式存在 否则就会报错
下面开始介绍三个指令 v-show v-for 和v-if指令
现在有这么一个需求 有0到9的数字先输出0-9 如果是js或者jq是先循环之后再.innerhtml在网页上输出 vue的逻辑也差不多但是写法上有点不一样 使用的是v-for指令
<template>
<div>
<div v-for="item in 9" :key="item" >
<h1>{{item}}</h1>
</div>
</div>
</template>
<script>
export default {
data(){
return {
msg:'hello vue',
}
}
}
</script>
<style>
</style>
这样就循环出来了 那么如果是输出奇数呢？ 使用v-if进行判断 或者使用v-show 但是注意两者的区别：v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。 v-show更多的是更改他的css的display样式的改变
<template>
<div>
<div v-for="item in 9" :key="item" v-if="item%2 != 0" >
<h1>{{item}}</h1>
</div>
</div>
</template>
<script>
export default {
data(){
return {
msg:'hello vue',
}
}
}
</script>
<style>
</style>
<template>
<div>
<div v-for="item in 9" :key="item" v-show="item%2 != 0" >
<h1>{{item}}</h1>
</div>
</div>
</template>
<script>
export default {
data(){
return {
msg:'hello vue',
}
}
}
</script>
<style>
</style>
再说点其他的指令
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
v-html这个指令一般是用于后台传过来的富文本的时候才用的
v-bind:是绑定属性的时候用的 但是一般用它都是简写成: 比如说绑定image的src地址为一个变量
Vue还提供了一个很有用的指令双向数据绑定 v-model 注意这个指令只能绑定在有焦点的上面使用比如input select textarea之类的东西 绑定在div上面是无效的
<template>
<div>
<input type="text" v-model='inputValue' >
<h1>{{inputValue}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
inputValue : null,
}
}
}
</script>
<style>
</style>
