初学Vue

vue的介绍与应用

介绍

Vue是一款mvvm框架，是由模型视图视图模型组成的，全程model-view-viewmodel。

带有前缀 v-的是指令

Vue.js 的语句

v-on:事件

v-for 循环语句

v-if 判断

v-model在input标签中用到

应用

1、声明式渲染

第一个vue 的例子

<div id="add">{{mgs}}</div>
<script>
    var add = new Vue({
        el:'#add',
        data:{
            mgs:'Vue示例操作'
        }
    });
</script>
打印结果
Vue示例操作

第二个vue 的例子

<div id="app">
<!-- v-bind动态绑定一个或多个属性 -->
<span v-bind:title="message" v-bind:style="aa">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script>
var app = new Vue({
    el:"#app",
    data:{
        //鼠标放上去显示当前时间
        message:'页面加载于 ' + new Date().toLocaleString(),
        aa:"color:red"
    }
});
</script>

打印结果

2、条件与循环

条件用到的是v-if指令

【案例】

<!-- 条件 -->
<div id="app">
    <h1 v-if="kanjian">我能看到</h1>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            kanjian:true
        }
    });
</script>

循环用到的是v-for指令

【案例】

<!-- 循环 -->
<div id="app1">
    <ol>
        <li v-for="todo in todos">
            {{todo.text}}
        </li>
    </ol>
</div>
<script>
//循环
var app1 = new Vue({
    el:"#app1",
    data:{
        todos:[
            {text:"学习Vue"},
            {text:"学习node"},
            {text:"学习jQuery"}
        ]
    }
});
</script>

下面是上面案例的打印结果

3、处理用户输入

v-on指令是绑定一个事件监听

【案例】

<!-- 消息逆转案例 -->
<div id="app">
    <h1>{{message}}</h1>
    <input type="button" value="点击" v-on:click = "dianji">
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello Vue!"
        },
        methods:{
            dianji:function(){
                this.message=this.message.split("").reverse().join("")
            }
        }
    });
</script>
打印结果
!euV olleh

4、组件化应用构建

Vue 中怎么注册组件

【案例】

<!-- vue注册组件 -->
<div id="app">
    <tou name="我是头部的名字"></tou>
    <zhong></zhong>
    <xia></xia>
</div>
<script>
    Vue.component('tou', {
        props: ['name'],
        template: '<h4>我是头部 {{name}}</h4>'
    })
    Vue.component('zhong', {
        template: '<h4>我只中部</h4>'
    })
    Vue.component('xia', {
        template: '<h4>我是下部</h4>'
    })
    var app = new Vue({
        el:"#app"
    });
</script>

如何使用v-bind 指令将 todo 传到每一个重复的组件中

【案例】

<ol>
    <todo-item name="item.text" v-for="(item , index) in todos" key="index"></todo-item>
</ol>
<script>
    Vue.component('todo-item',{
        props:['name'],
        template:'<li>{{name}}</li>'
    });
    
    var app = new Vue({
        el:"#app",
        data:{
            todos:[
                {text:'吃饭'},
                {text:'睡觉'},
                {text:'打豆豆'}
            ]
        }
    });
</script>

以下图片是上面的打印结果

https://wujian1994.github.io/vue
https://github.com/wujian1994...

喜欢的朋友可以点赞奥