Vue---模板语法

1. 终端输入：

vue create vue-demo

根据上篇文章依次进行选择

2.创建完成之后，输入

cd vue-demo
npm run serve

3.①assets存放静态资源，比如公共的CSS文件，图片等。

②components代表公共组件，在此存放的就是Vue的组件，因为Vue是组件化开发的。

③App.vue是主入口的组件，Vue是组件化开发的，组件与组件之间互相是有引用关系的，可以把App.vue理解成根组件，所有的组件都是从这里开始的，都是通过它来进行引入并且显示的。

④main.js是主入口文件，它的入口文件就是public with the main，是程序的入口，main.js中的内容就相当于程序的入口，有引入Vue，挂载到App当中进行显示等等。

⑤registerServiceWorker.js可以看做是一个监听文件，就是整个服务在这里都可以有信息的提示。

4. 打开components文件夹中的HelloWorld.vue文件

5.把文件修改一下：

<template>
<div class="hello">
    <h3>模板语法</h3>
</div>
</template>

<script>
export default{
    name:"helloworld",
}
</script>

6.输入网址：localhost:8080可以看到对应内容

7.

<template>
<div class="hello">
    <h3>模板语法</h3>
    <p>{{message}}</p>//显示学习模板语法
    <div>{{rawHtml}}</div>//显示<a href="http://www.baidu.com">百度</a>
    <div v-html="rawHtml"></div>//显示百度而且可以跳转到百度网页
    <div v-bind:id="aid"></div>//属性实现动态化
    <p>{{num + 10}}</p>//输入20
    <p>{{flag ? "你好": "再见"}}</p>//你好
    <p>{{message.split('').reverse().join('')}}</p>
    // split('') 把一个字符串分割成字符串数组
       把数据拆分为一个数组,括号里的' '是把数据拆分为每个字符串

    // reverse() 颠倒数组中元素的顺序
       只作用于数组，跟在split('')后才能起作用，在一个字符串后面不起作用，如message.reverse()
   
    // join('') 把数组中的所有元素放入一个字符串
   
    //所以message.split('').reverse().join('')  意思是把字符串翻转重组成字符串
</div>
</template>

<script>
export default{
    name:"helloworld",
    data(){
        return{
            message:"学习模板语法",
            rawHtml:"<a href="http://www.baidu.com">百度</a>",
            aid:100,
            num:10，
            flag:true
  }
 }
}
</script>

注意：v-bind可以简写成：

上面的语句也就可以写成

 <div :id="aid"></div>

8.这些表达式会在当前活动实例的数据作用域下作为JavaScript被解析。

注意：每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

{{var a = 1}}//这是语句，不是表达式
{{if (ok) {return message} }}//流程控制也不会生效，可以使用三元表达式