Vue基本语法

Vue基本用法

前端三大框架:

Vue模板语法

<h2>{{ msg }}h2>
<h3>{{ 'hhahda' }}h3> #字符串
<h3>{{ 1+1 }}h3>  #可运算
<h4>{{ {'name':'alex'} }}h4> #可插入对象
<h5>{{ person.name }}h5> #可对象取值
<h2>{{ 1>2? '真的': '假的' }}h2> #可三元语法
<p>{{ msg2.split('').reverse().join('') }}p> 

Vue的指令系统

v-text和v-html

v-text相当于innerText
v-html相当于innerHTML 

v-if和v-show

v-show 相当于 style.display

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-bind和v-on

v-bind可以绑定标签中任何属性  
v-on 可以监听 js中所有事件

简写：
v-bind:src  等价于   :src
v-on:click 等价于 @click 

v-for 遍历列表

v-for可以遍历列表，也可以遍历对象
在使用vue的v-for指令的时候，一定要绑定key,避免vue帮咱们计算DOM

<div id="app">
    <ul v-if="data.status === 'ok'">
        
        <li v-for = '(item,index) in data.users' :key="item.id" >
            <h3>{{ item.id }} -- {{ item.name }} -- {{ item.age }}h3>
        li>
    ul>
    <div v-for = '(value,key) in person'>
        {{ key }}-----{{ value }}
    div>
div>

<script src='./vue.js'>script>
<script>

    new Vue({
        el: '#app',
        data() {

            return {
                data: {
                    status: 'ok',
                    users: [
                        {id: 1, name: 'alex', age: 18},
                        {id: 2, name: 'wusir', age: 30},
                        {id: 3, name: 'yuan', age: 48}
                    ]
                },
                person:{
                    name:'alex'
                }
            }
        },
        methods: {}

    })
script>

watch和computed

watch:可以监听单个属性

computed:可以监听多个属性

v-model 数据的双向绑定

v-model只能应用在input,textarea,select标签中

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值,将 Vue 实例的数据作为数据来源。



Message is: {{ message }}