Vue-2 模板语法

根据慕课网的课程做的笔记

Vue基本概念

模板语法

  • 认识Vue文件结构(template,script,style)
  • 模板语法包含插值、指令(指令缩写)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title>
    <style type="text/css">
        .bg{ color: Red;}
    style>
    <script type="text/javascript" src="../scripts/vue.js">script>
head>
<body>
    <div class="bg" id="app">
        {{msg}}<br />
        {{count}}<br />
        {{(count+1)*10}}<br />
        {{template}}<br />
        <div v-html="template">div>
        <a  v-bind:href="url">百度a>
    div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: 'hello vue!!',
                count: 0,
                url:"http://www.baidu.com",
                template:"
hello template
"
} });
script> body> html>

Vue-2 模板语法_第1张图片
v-bind是绑定属性的,例如:可以动态绑定id或者class的值
Vue-2 模板语法_第2张图片
v-on是绑定某些事件的,例如鼠标点击事件,双击事件,悬停事件等,使用示例:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>title>
    <script type="text/jscript" src="../scripts/vue.js">script>
head>
<body>
    <div id="app">
        <div>
            count={{count}}<br />
            (count+1)*10 ={{(count+1)*10}}<br />
            <button type="button" v-on:click="submit()">
                点击一次,count加一button>
        div>
    div>
    <script>
        new Vue({
            el: "#app",
            data: {
                count: 0
            },
            methods: {
                submit: function () {
                    this.count++;
                }
            }
        });
    script>
body>
html>

每点击一下,就会触发submit方法
Vue-2 模板语法_第3张图片
on指令可以缩写@,v-bind指令可以缩写为:

你可能感兴趣的:(Vue)