vue-2 模板语法

router/index.js
//1、引入基础依赖
import Vue from 'vue'
import Router from 'vue-router'
//2、引入要路由的页面
import Smarty from "../components/smarty"

//3、将Router插件注册为Vue全局组件
Vue.use(Router)

const router = new Router({
    routes:[
       {
          path: '/smarty', name: 'smarty', component: Smarty
        }
    ]
})

export default router

APP.vue
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router //添加路由
}).$mount('#app')

 

<template>
  <div id="app">
    <div>
      <router-link to="smarty">模板语法</router-link>
    </div>
    <div>-------------------------------------</div>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

smarty.vue

<template>
  <div>
    <h1>模板语法</h1>
    <h2>插值语法{{title}}</h2>
    <div>html:{{html}}</div>
    "v-html:"<span v-html="html"></span><br />
    <input type="button" v-bind:value="buttonTitle" />
    缩写：<input type="button" :value="buttonTitle" />
    <div>计算：{{ num +1 }}</div>
    <a :href="url">百度</a><br/>
    <input type="button" value="确认" @click="onsubmit" />
  </div>
</template>

<script>
export default {
  name: 'smarty',
  data() {
    return {
      title: "Vue模板语法标题",
      html: "hello,<span style='color: red'>张三</span>。",
      buttonTitle: "确认",
      num: 10,
      url: "https://www.baidu.com"
    }
  },
  methods: {
    onsubmit(){
      alert("确认")
    }
  }
}
</script>