Vue学习

Hello World

• npm init初始化项目
• npm install vue安装Vue
• 引入Vue

<script src="./node_modules/vue/dist/vue.js"></script>

• hello world

<div id="app">
        <p>{{message}}</p>
</div>
<script>
var vm = new Vue({//创建vue对象
    	el:'#app',//vue绑定的元素
        data:{
        message:'hello,world',
    },
});
</script>

Vue模板

• 双大括号语法：{{message}}
• 保留HTML：v-html
• 常用指令：v-bind:[属性名]（简写成:[属性名]）|v-on:[事件]="funtion"（简写成@:[事件]="funtion"）

<div id="app">
	<p>{{message}} </p>
    <p v-html="rawHtml"> </p>
    <p v-bind:title="ptitle">title属性</p>
    <p :title="ptitle">title属性</p>
    <p>{{ boolean ? 'true' : 'false' }}</p>
    <p><input type="button" v-on:click="funtion" value="点击"/></p>
    <p><input type="button" @click="funtion" value="点击"/></p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:'Hello,World',
            rawHtml:'<p color="red">这是一个p标签</p>',
            ptitle:'鼠标放上去显示文本',
            boolean:false,
        },
        methods: {
            funtion(){
                alert('你点击了一个按键');
            },
        },
	});
</script>

监听与计算

• 计算：封装复杂业务