基本语法

<body>

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

<div id="app">

    {{ msg }}

    <div v-html='html'>

    <input type="button" value="改变" @click="fc">

    <div class="box" :class="{active:is_ok}" :class="['active']"></div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            html:"<p>hello</p>",

            msg: 'hello',

            is_ok: false

        },

        methods: {

            fc: function () {

                this.msg = 'ssss'

            }

        }

    })

</script>

v-text相当于innerText

v-html相当于innerHTML

v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

<h1 v-if="age>15">{{ age }}</h1>
<h2 v-else-if="age<15">二标签</h2>
<h3 v-else>三标签</h3>

<div v-show='true'>
<h1>1111</h1>
</div>

v-bind可以绑定标签中任何属性          v-bind:src 等价于 :src
v-on 可以监听 js中所有事件                        v-on:click 等价于 @click

class 两种绑定方式:

1. :class="{active:is_ok}"

2. :class="['active']"

三元运算符

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

事件处理

阻止单击事件继续传播

<a v-on:click.stop="fun"></a>

提交时间不在重载页面

<form v-on:submit.prevent="onSubmit"></form>

串联

<a v-on:click.stop.prevent="fun"></a>
 循环

<ul>
    <li v-for="(list,index) in list_all">
        {{ index+1 }}--{{ list }}
    </li>
</ul>

表单输入绑定(用v-model)

<input type="text" v-model="username">
<textarea v-model="info"></textarea>

单选框绑定

{{ xb }}
<input type="radio" value="0" name="gender" v-model="xb">男
<input type="radio" value="1" name="gender" v-model="xb">女
 
多选框
<input type="checkbox" value="study" name="gender" v-model="xb">学习
<input type="checkbox" value="practice" name="gender" v-model="xb">练习
xb: []
 

<select v-model="xb">
    <option value="0">bbb</option>
    <option value="1">jjj</option>
    <option value="2">sss</option>
    <option value="3">hhh</option>
</select>

计算属性和监听属性

计算(vue推荐方法)
computed: {
    fnc() {
      return  this.msg.split('').reverse().join('')
    }
}
监听:
computed: {
    fnc() {
        return this.msg.split('').reverse().join('')
    }
},
watch: {
    msg:function(newVal, oldVal) {
        alert(newVal + ' ' + oldVal)
    }
}

过滤器

<div id="app">
    {{ price | US | Yuan }}
</div>
<script>
    //全局
    Vue.filter('Yuan', function (value) {
        if (value == '') {
            return
        }
        return value + '美元'
    })
    //内部
    var vue = new Vue({
        el: "#app",
        data: {
            price: 99.9
        },
        filters: {
            US: function (value) {
                return '$' + value
            }
        }
    })

</script>

axios(ajax)

var demo = new Vue({
    el: "#app",
    data: {
        list_data: [],
        list: [1, 2, 3, 4]
    },
    mounted: function () {
        axios({
            method: 'get',
            url: '/1',
        }).then(
            //function (dat) {
            //demo.list_data = dat.data
            // }
             dat => {
                this.list_data = dat.data
            }

        ).catch(function (error) {
            console.log(error)

        })
    }
})
 组件-基础 (面包屑导航)

 <style>
        .crumb {
            width: 90%;
            line-height: 50px;
            margin: 0px auto;
            border-bottom: 1px solid #ddd;
        }
    </style>

<body>
<div id="app">
    <breadcrumb></breadcrumb>
</div>

<script>
    Vue.component('breadcrumb', {
        template: '<div class="crumb">当前位置是:首页&gt;新闻列表</div>'

    })

    var vm = new Vue({
        el: '#app',
    })
</script>
组件02

    <style>
        .crumb {
            width: 90%;
            line-height: 50px;
            margin: 0px auto;
            border-bottom: 1px solid #ddd;
        }

        .hot {
            color: red;
            font-weight: bold;
            text-indent: 10px;
        }
    </style>

<body>
<div id="app">
    <breadcrumb pos="首页>新闻"></breadcrumb>
</div>

<script>
    Vue.component('breadcrumb', {
        props: ['pos'],
        template: '<div :class="{crumb:true,hot:isHot}" @click="isHot=!isHot">{{ pos }}</div>',
        // 独立的数据function(){return{name:'aa'}}    共享数据 : data:{}
        data: function () {
            return {
                isHot: true,

            }
        }
    })

    var vm = new Vue({
        el: '#app',
    })
</script>

vue 跨域解决方法

dev: {

    // Paths

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {

      '/api': {

        target: 'http://localhost:7001',//后端接口地址

        changeOrigin: true,//是否允许跨越

        pathRewrite: {

          '^/apis': '',//重写,

        }

      }

    },
 
 

Vue的模板语法的更多相关文章

  1. vue基础---模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  2. Vue.js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

  3. VUE：模板语法（小白自学）

    VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...

  4. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  5. Vue基础之Vue的模板语法

    Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...

  6. 前端框架之Vue(2)-模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  7. Vue常用模板语法

    常用模板语法   本篇将在上一篇的基础上记录文本渲染.表达式.过滤器以及常用指令的简单用法. 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只 ...

  8. vue基础——模板语法

    模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. ...

  9. 一起学Vue之模板语法

    概述 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTM ...

  10. Vue小白篇 -Vue 的模板语法

    可以插入任何你想插入的内容,除了 if-else if-else用三元运算符代替 <div id="box"> <!--模板语法--> <h2> ...

随机推荐

  1. HDU1754 —— I Hate It 线段树 单点修改及区间最大值

    题目链接:https://vjudge.net/problem/HDU-1754 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜 ...

  2. YTU 2416: C语言习题 成绩输出

    2416: C语言习题 成绩输出 时间限制: 1 Sec  内存限制: 128 MB 提交: 1111  解决: 417 题目描述 输入n(<=10)个学生的姓名.学号和成绩,将其中不及格者的姓 ...

  3. VS2013插件开发

    一.功能描述 项目中有一个AppSettings.xml文件,当这个文件有添加新元素的时候,将该添加的内容自动同步到其他目录下的AppSettings.xml文件. 二.插件模板选择 要开发VS插件需 ...

  4. PCB Web版SI9000阻抗计算器

    在几个月前写过一遍关于: PCB SI9000阻抗计算引擎Web方式实现方法  ,最近开始参考Polar SI9000的界面,将阻抗计算器转为网页版的方式实现.   一.Web版SI9000阻抗计算器 ...

  5. codeforces912E(折半搜索+双指针+二分答案)

    E. Prime Gift E. Prime Gift time limit per test 3.5 seconds memory limit per test 256 megabytes inpu ...

  6. 【OpenJ_Bailian - 4152 】最佳加法表达式（动态规划）

    最佳加法表达式 Descriptions: 给定n个1到9的数字,要求在数字之间摆放m个加号(加号两边必须有数字),使得所得到的加法表达式的值最小,并输出该值.例如,在1234中摆放1个加号,最好的摆 ...

  7. Unix\Linux | 总结笔记 | 邮件发送

    实验:在本地实现不同用户收发邮件 #root发送邮件 #stu 收邮件 #stu 查看邮件 并回复邮件 #root 查看stu回复的邮件

  8. 【CSS】少年，你想拥有写轮眼么？

    最近笔者在公司内部开展了一次CSS讲座,由于授课经验不太足,授课效果自我感觉并不太好,不过课中有一个笔者用CSS写的一个小效果,其中还是包含了蛮多CSS的常见知识点的,正好也有部分同学很感兴趣如何实现 ...

  9. 移动游戏By HYJ

    暴力求SG函数即可,记忆化贼方便 /*program from Wolfycz*/ #include<cmath> #include<cstdio> #include<c ...

  10. 总结用CoreText绘制文本时遇到的问题以及解决办法

    关于CoreText不做解释.用的人自然知道这个是干什么的. 功能非常强大,可以绘制文本,图片等. 这次用的Xcode7.0的版本.所以之前很多方法,现在不能用.也不是不能用,就是有黄色警告很不爽. ...