Vue.js用法详解(2)

日期：2020-05-21 栏目：程序人生浏览：次

属性：使用v-bind进行绑定，可以响应变化。

<h2 :class="{red:show}">标题</h2> => 注意此处的show为data内的一个布尔值数据，若真则添加red的class，若假则移除red的class，

使用javascript表达式：可以写简单的表达式。（可以简单的三目运算，但是不可以写if语句），以后会有计算属性。

{ 1+2 }
{ true? "yes":"no" }

2. 字符串模版

template字符串

tempalte => 选项对象的属性

模版将会替换挂载的元素。挂载元素的内容都会被忽略，根节点只有一个，将html结构写在一对script标签中，设置type="x-template"。

<body>
  <div id="box">

  </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var str = '<h2>hello pink!</h2>'
    var vm = new Vue({
      el: '#box',
      template: str
    });
  },false);
</script>

说明权重比较高，直接“代替”挂载点，把原来的html替换后显示。

//代码片段这个就是利用script标签对内定义模版，局限性：不能跨文件使用，一个页面中可以使用
<body>
  <div id="box">

  </div>
</body>
<script src="vue.js"></script>
<script type="x-template" id="str">
  <p>我是一个p标签</p>
</script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#box',
      template: '#str'
    });
  },false);
</script>

Vue实例，每一个应用都是通过Vue这个构造函数创建根实例（root instance）启动New Vue（选项对象）。需要传入选项对象，对象包含挂在元素，数据，模板、方法等。

el：挂载元素选择器 --- String|HtmlElement
data：代理数据 --- Object|Function
methods：定义方法 --- Object

Vue代理data数据，每个vue实例都会代理其data对象里所有的属性，这些被代理的属性是响应的。新添加的属性不具备响应功能，改变后不会更新视图。

Vue实例自身属性和方法，暴露自身的属性和方法,以“$”开头的，例如：$el、$data。。。

var vm = new Vue({
    el: '#app',
    data: {
     message: 'hello,Datura!!!'
    }，
    methods: {
      test (){
        alert(1);
      }
    },
    compontents:{
    //这里存放组件
    }
   });
 /* vm就是new出来的实例 */
 console.log(vm.$data);//也就是数据data，后面还有很多挂载在vm（new出来的）实例上的属性
//代码片段放在template标签里，并给一个id名
<body>
  <template id="tem">
    <p>我是template</p>
  </template>
  <div id="box">

  </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#box',
      template: '#tem'
    });
  },false);
</script>

转载注明出处：http://www.heiqu.com/6085.html

Vue.js用法详解(2)

相关推荐