zoukankan      html  css  js  c++  java
  • vue基本指令1

    main.js

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'

    //配置开发模式

    Vue.config.productionTip = false

    /* eslint-disable no-new */

    //创建实例
    new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
    })

    2.//模版语法(Mustache){{}}只能存在单行语句

    <script>
    export default {
    name: 'HelloWorld',

    //data表示state状态
    data () {
    return {
    msg: 'Welcome to Your Vue.js App'
    }
    }
    }
    </script>

    3.v-once(只能渲染一次  const)

    {{msg}}
    <p v-once>{{msg}}</p>//只能渲染一次

    4.v-html:解析html结构

    <div v-html="biaoqian"></div>

    <script>
    export default {
    name: 'HelloWorld',
    data () {
    return {
    msg: 'Welcome to Your Vue.js App',
    biaoqian:"<h1>我是H1标签</h1>"
    }
    }
    }
    </script>

     5.v-bind指令(解析属性中的对象)

    简写(:)

     对象;

    <a v-bind:href="url">{{url_name}}</a>
    <a :href="url">{{url_name}}</a>
    <p v-bind:class="disClass">我是段落p</p>
    <p :class="disClass">我是段落p1</p>
    <p :class="dis2Class+'-22'">我是段落p22</p>

    <script>
    export default {
    name: 'HelloWorld',
    data () {
    return {
    msg: 'Welcome to Your Vue.js App',
    biaoqian:"<h1>我是H1标签</h1>",
    url_name:"百度",
    url:"https://www.baidu.com",
    disClass:"disactive",
    dis2Class:"item"
    }
    }
    }
    </script>

  • 相关阅读:
    c语言中的隐式函数声明(转)
    static关键字
    Eclipse中spring项目的XML文件的问题
    spring 中c3p0的优化配置
    Mysql通过SQL脚本复制表
    tomcat 设置内存
    删除无限循环的文件夹-删除递归文件夹
    使用cnpm代替npm
    数据库框架的log4j日志配置
    Win7删除远程连接历史记录
  • 原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11299070.html
Copyright © 2011-2022 走看看