vue基础知识笔记（一）—— 指令

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{
    { message }}</div>

<script>
  const vm = new Vue({
    el:"#app",
    data:{
            massage:'Hello Vue!'
    }
})
</script>

el指定的选择器区域就是View视图区域，new Vue（）构造函数得到的vm实例对象就是ViewModel，data指向的对象就是Model数据源。

有一个小工具是vue-devtools调试工具可以在浏览器上安装使用，便于对vue进行调试和开发。

vue指令

指令是vue的模板语法，用于辅助开发者渲染页面的基本结构。

内容渲染指令

内容渲染指令用于辅助开发者渲染DOM元素的文本内容，

v-text

v-text指令会覆盖元素内默认的值。

{ {}}文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

<span>Message: {
  { msg }}</span>

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 data中的msg 属性更改时它也会同步更新。

v-html

v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需使用 v-html 指令

使用：

  <div id="app">
    <p v-text="username"></p>
    <p v-text="gender">性别</p> 

    <p>姓名：{
  {username}}</p>
    <p>性别：{
  {gender}}</p>

    <p v-text="desc"></p>
    <p>{
  {desc}}</p>
    <p v-html="desc"></p>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        username: 'zs',
        gender: '男',
        desc: '<i style="color:red;">abc<i>'
      }
    })
  </script>

属性绑定指令

v-bind 指令

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令，（简写为英文的 : 或者当使用 .prop 修饰符为 . )

v-bind 动态的绑定一个或多个 attribute，也可以是组件的 prop。

v-bind 指令修饰符：

.camel - 将短横线命名的 attribute 转变为驼峰式命名。
.prop - 强制绑定为 DOM property。（.prop 修饰符也有专门的缩写 .）
.attr - 强制绑定为 DOM attribute。

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />

<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc" />

<!-- 缩写形式的动态 attribute 名 -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
<MyComponent :prop="someThing" />

<!-- 传递子父组件共有的 prop -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

<!--.prop简写-->
<div :someProperty.prop="someObject"></div>
<!-- 等同于 -->
<div .someProperty="someObject"></div>

动态绑定多个值

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

通过不带参数的 v-bind ，你可以将它们绑定到单个元素上

<div v-bind="objectOfAttrs"></div>

带参数在：后面添加参数

<div v-bind:id="dynamicId"></div>

使用 Javascript 表达式

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算。

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

 <div id="app">
      <p>{
   {number + 1}}</p>
      <p>{
   {ok ? 'True' : 'False'}}</p>
      <p>{
   {message.split('').reverse().join('')}}</p>
      <p :id="'list-' + id">xxx</p>
      <p>{
   {user.name}}</p>
    </div>

    <!-- 导入 vue 脚本文件 -->
    <script src="./lib/vue-2.6.12.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          number: 9,
          ok: false,
          message: 'ABC',
          id: 3,
          user: {