vue(常用指令、:key标识符、属性绑定与数据流)_v-else used on element <template> without correspo-CSDN博客

本文链接：https://blog.csdn.net/m0_45315697/article/details/105560351

vue指令

在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方是，
指令的值是用引号括起来的 表达式，不同的指令有不同的作用，
vue内置了一些常用的指令，而且我们还可以自定义指令。
1、内容输出指令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容输出指令</title>
    <!--引入下载到本地的vue.js-->
    <script src="js/vue.js"></script>
    <style>
        /* 不会显示，直到编译结束时 */
        [v-cloak] {
   
            font-size: 20px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- vue指令的写法：v-指令名称=表达式
         注意：这里的表达式不是普通的字符串 
     -->
    <div id="app" class="myApp">
        <!-- 表达式的值除了可以出现内容中，也可以使用在其它位置，比如：属性。
        比如，给上面的div添加calss属性，并赋值class="myAPP",
        或者class="{
   {myApp}}"这样写,浏览器会把花括号及里面的内容`{
    {myApp}}`都当成字符串,
        不能使用 `{
    {}}`语法,花括号只在内容区使用，这时就需要 `指令`了.
        所以上面的写法，与普通写法有冲突，页面不会受到影响。
        -->
        <!-- 通过 {
   {
   }} 我们可以很方便的中模板中输出数据，但是这种方式会有一个问题，
        当页面加载渲染比较慢的时候，页面中会出现 {
   {
   }},vue提供了几个指令来解决这个问题,
        vue指令中的表达式不需要使用 {
   {
   }} -->

        <!-- 如下，使用vue表达式，会把结果直接返回 -->
        {
   {
   myApp}}
        {
   {
   txt}}
        {
   {
   x+y}}
      
        <h1>{
   {
   title}}我是大标题<h2>副标题在这里</h2></h1>
        <!-- 如上，直接使用{
   {
   }},可以获取后面添加的内容(文本内容或者子标签)，并显示到页面,
        如下：
        这是vue指令我是大标题
        副标题在这里-->
        <!--如果在浏览器控制台上修改title的值，页面上的内容会更新 
            app.title="有变化了"
            "有变化了" 
        -->
       
        <!-- v-text 指令-->
        <h1 v-text="title">我是大标题<h2>我也是副标题啊</h2></h1>
        <!-- 它会填充整个innerHTML,里面添加的文本内容"我是大标题"不会显示到页面，
             但添加的子标签及文本内容可以显示 -->
        
        {
   {
   content}}
        <!--我们在data中的`<style>body{background-color:lightblue;}</style>`，
            我们想去改变页面的背景色，但是为了防止xss攻击，
            默认情况下输出是不会作为html解析的，上面的写法，页面上只会显示一串字符串，
            而不会改变原本的样式，这种情况下，需要另一个vue的指令 `v-html` -->
        
        <!-- v-html 指令-->
        <!-- 它可以让内容作为html进行解析，如下写法，页面背景色就被改变了 -->
        <p v-html="content"></p>
        
        <!-- v-cloak 指令-->
        <!-- v-cloak 需要结合css使用 -->
        <p v-cloak>{
   {
   content}}</p>

    </div>
    <script>