vue入门(一)

Vue基本代码结构

1.引入vue.js文件

<script type="text/javascript" src="js/vue.js" ></script>

2.创建Vue对象
el代表选中的区域，data为数据

<script>
    var vm=new Vue({
        el: '#app',
        data: {
            msg:'123'
        }
    })
</script>

3.插值表达式与v-cloak
双括号{{msg}}会将数据绑定在对应标签上

<p>{{msg}}</p>

当客户端网速慢时，浏览器会先显示{{msg}}，等到js文件加载完毕才显示对应数据，为了解决闪烁问题使用v-cloak标签

<style>
      [v-cloak]{
          display: none;
       }
</style>

<p v-cloak>{{msg}}</p>

4.v-text 和v-html指令
默认v-text是没有闪烁的，会覆盖元素中的原本内容
v-html会加载数据中的html

<h4 v-text="msg"></h4>
<div v-html="msg2"></div>

<script>
    var vm=new Vue({
        el: '#app',
        data: {
            msg:'123',
            msg2:'<h1> 我是一个h1标签</h1>'
        }
    })
</script>

image.png

5.v-bind
v-bind是Vue中，提供的用于绑定属性的指令，可以简写为：，在v-bind中可以写合法的js表达式

<input type="button" value="按钮" title="提示信息" />
<input type="button" value="按钮" v-bind:title="msg3" />
<input type="button" value="按钮" :title="msg3+123" />

6.v-on
v-on是事件绑定指令,可以用@简写

<input type="button" value="事件绑定" v-on:click="show" />

<script>
    var vm=new Vue({
        el: '#app',
        data: {
            msg:'123',
            msg2:'<h1> 我是一个h1标签</h1>',
            msg3:'这是提示信息'
        },
        methods:{
            show:function(){
                alert('hello')
                }
            }
        })
</script>

7.v-for
v-for可以循环遍历普通属猪。对象数组，对象，迭代数字.key属性只能使用number或者string 且唯一。必须使用v-bind绑定

<p v-for="item in list" v-bind:key="item.name">
    <input type="checkbox" />{{item.id}}----{{item.name}}
</p>

8.v-if和v-show
v-if的特点是每次都会重新创建和删除元素，有较高的切换性能消耗，而v-show是对DOM的操作，切换了display:none样式，有较高的初始渲染消耗